Optimize and minify SVG files

How it works

1. 1

   Drop an .svg file or paste the markup.

2. 2

   Set the decimal precision, starting at 2.

3. 3

   Compare the original and optimized previews and the bytes saved.

4. 4

   Copy the optimized markup or download the .min.svg file.

About the SVG Optimizer/Minifier

SVG files saved from Inkscape, Illustrator or Sketch carry comments, editor namespaces, metadata blocks and coordinates with six or more decimal places. None of that changes how the graphic looks, but it all adds bytes to every page that loads the icon. This optimizer rewrites the markup in your browser, drops the editor leftovers and rounds numbers to the precision you choose.

What you can do

• Drop an .svg file or paste raw <svg> markup into the input box.
• Remove XML declarations, DOCTYPEs, comments, <metadata> and Inkscape, Sodipodi, Sketch, RDF and Dublin Core tags and attributes.
• Drop empty attributes and empty <g> groups, and collapse extra whitespace between tags.
• Round numbers in path data, coordinates, sizes, transforms and the viewBox to between 0 and 10 decimal places.
• See original bytes, optimized bytes and the percentage saved, then copy the result or download it as a .min.svg file.

When it works best

• Cleaning up icons exported from a design tool before you commit them to a codebase.
• Inlining an SVG in HTML or CSS, where every byte ends up in the page source.
• Shrinking a logo that an email template or CMS embeds directly.

Things to know

• The markup is parsed and rewritten in your browser; the file never reaches a server.
• It does not merge paths, convert shapes or minify CSS inside <style> blocks, so a dedicated build tool can go further.
• Precision 1 to 3 suits most icons. Set it to 0 on detailed artwork and small curves can visibly shift, so check the side-by-side preview.
• Malformed markup, such as an unclosed tag or more than one root <svg>, is rejected with an error instead of being guessed at.

Frequently asked questions