Minify
SVG Minifier
SVG minify is how icons stop arriving with Illustrator leftovers. Comments, doctypes, editor metadata, gaps between tags — none of that is pixels. Treat the markup as XML you will inline or save as a tiny asset.
Drop a file on the left. Drafts stay in this browser. Shortcut: Ctrl or Cmd + Enter to run.
How this svg minifier works
- Paste or drop a .svg file into the input on the left.
- Flip options if you see them (comments, indent, case). Defaults are the safe ones.
- Hit Run, or Ctrl / Cmd + Enter. Leave “Process on server” off unless you mean it.
- Read the status line, then copy, download, or jump to a related tool.
Clean markup, not a new drawing
SVGO can rewrite paths, merge groups, and convert shapes. That is powerful and occasionally lossy. The pass here is hygienic: smaller source, same drawing commands. Use it before you paste an icon into a React component or a CSS mask.
If you still need to read the file, the SVG beautifier puts the tags back on separate lines. Optimize and minify share the same family of transforms so the two pages do not drift.
Frequently asked questions
What does SVG minify delete?
Comments, doctypes, extra space between tags, often <?xml ...?> noise. <svg>\n <rect x="0" />\n</svg> becomes <svg><rect x="0"/></svg>. The rectangle did not move. Editor leftover id="Layer_1" is next on the chopping block if you strip metadata.
Is this the same as SVGO?
SVGO can rewrite path data, merge shapes, and convert fills. That is powerful and occasionally lossy (a rounded join that looked right at 24px). This kind of minify is the hygienic pass: smaller markup, same drawing commands.
Will minify break an SVG animation or CSS inside the file?
If CSS or JS lives inside the SVG, treat it like HTML-with-friends: do not smash strings. IDs that CSS targets (#icon-heart) must stay. Deleting unused ids is only safe if nothing references them.
Fun SVG fact?
Fun fact: SVG is XML, so <Rect> is not <rect>. HTML parsers are sloppy; SVG in a .svg file is not. Beautify and minify should keep tag case. That one capital letter is a blank icon waiting to happen.
Should I inline minified SVG in HTML?
Often yes for icons: one HTTP request, CSS can color currentColor. Minify first so your React component is not 400 lines of Illustrator comments. Keep a pretty copy in /assets if designers still edit it.
Example of junk worth deleting?
<!-- Generator: Adobe Illustrator -->, empty <g></g>, and sodipodi: / inkscape: namespaces if you are not going back to Inkscape. The d path is the drawing. The essay above it is not.
Does SVG minify shrink like JPEG compress?
No. Raster compressors throw away pixels. SVG minify throws away text that was never pixels. A photo saved as SVG (thousands of path points) needs a different conversation — maybe it should not be SVG.
Minify vs beautify for SVG?
Minify to go live or inline. Beautify to hand-edit a path group. Same family. If a path wraps to one endless line, beautify the file, edit, minify again.