SVG Minifier

Trimming SVG without touching the drawing

SVG files exported from design tools carry a lot of baggage: editor metadata, XML comments, an <?xml?> prolog, a doctype, hidden layers, and generous whitespace. None of it affects what you see. Minifying strips the dead weight and leaves the geometry intact, which matters most when you inline icons where every byte repeats in your CSS or HTML.

What is safe to remove

Comments, the prolog, editor namespaces like xmlns:sodipodi, empty groups, and default attribute values all go without visual change. More aggressive passes round path coordinates to fewer decimals and merge transforms, which can shave significant size on detailed artwork but risk tiny shifts if you round too hard.

Example

Before:
<?xml version="1.0"?>
<!-- Created with Editor -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
  <path d="M12.000 2.000 L22.000 12.000" />
</svg>

After:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M12 2 22 12"/></svg>

The trailing zeros collapse, the comment and prolog disappear, and the whitespace between tags is gone. The rendered line is identical.

Pitfalls

Do not strip the root xmlns; without it the SVG stops rendering in many contexts. Removing id attributes breaks any SVG that references them for gradients, clip paths, or animation. If you are feeding the result into a CSS background, minify first and then run the SVG to CSS converter so the data URI is as small as possible.

FAQ

Will minifying change colors or shapes? Safe passes do not. Only coordinate rounding can shift anything, and only by sub-pixel amounts at reasonable precision.

Can I keep it readable? Yes, choose a mode that keeps attribute formatting but drops comments and prolog. Full minification trades legibility for size.

Does it help gzip? Already-gzipped transfer sizes shrink less dramatically, but inlined SVG in CSS still benefits because the raw string is shorter in every copy.