Why is that SVG so big?
If a single icon is over 20 KB, it is not because the drawing is complex. The editor writes its own state into the file: layer names, the zoom level you last used, the save timestamp, guide positions — none of which a browser ever reads.
| Removed | What it is |
|---|---|
<metadata> | Where title, author and licence go. No effect on the drawing |
inkscape: sodipodi: | Inkscape's layer and guide data |
i: x: graph: | Values Illustrator needs to reopen the file |
sketch: figma: | Original layer names from Sketch and Figma |
| Comments, the XML declaration, DOCTYPE | Not needed by an SVG on the web |
| Line breaks and indentation | Whitespace between elements does not affect rendering |
Decimal places are often the real culprit
Editors write coordinates like 39.500000, to six decimal places. That is a
difference of far less than a thousandth of a pixel on screen, and it costs five extra characters
per coordinate. A path with 200 coordinates wastes a kilobyte on its own.
The default of 2 places is generous for icons and logos. For a drawing that
gets zoomed hard, like a map, raise it to 3. Conversely, an icon on a 0 0 24 24
viewBox can drop to 0 or 1 without anyone noticing.
What is left alone
There are two places where whitespace carries meaning. Those pass through untouched.
- Inside
<text>and<tspan>— a single space is the gap between letters - Inside
<style>and<script>— that is CSS and JavaScript, not XML. To shrink the CSS in there, run it through CSS Minify separately
id attributes are kept too. A <use href="#icon">, a CSS
selector or some JavaScript may be finding the shape by that name, and this page is looking at
one SVG in isolation with no way to know.
Why <title> stays by default
Because a screen reader announces it. For a purely decorative icon you can drop it, but removing it from a drawing that carries meaning — a logo, a status icon, a chart — makes that element disappear entirely for someone who cannot see the screen. It is the one option that is off by default.
Can I still edit a minified SVG?
The drawing opens fine. Layer names and guides are gone, though. Keep the original for continued work in the editor and minify only the copy you publish.
If you only need to read it, SVG Formatter unfolds it again. The indentation comes back; the deleted values do not.
How do I use it as a CSS background?
Minify first, then put it through SVG to CSS Background. URL encoding comes out smaller than Base64, and it stays editable by hand when you only want to change a colour.
Does gzip not take care of this anyway?
It helps. But gzip only collapses repeated text; it cannot rewrite
39.500000 as 39.5. The two do not overlap — they each earn their
keep. A minified SVG served with gzip is the smallest of all.