Every project has at least one multi-kilobyte SVG icon that could have been a few hundred bytes. Design tools write SVG for their convenience, not for the web — and the result is routinely 3–5× larger than it needs to be.
Here are the 7 things making your SVGs bigger than they should be.
1. Editor metadata
<metadata> blocks, rdf:RDF payloads, generator comments — Figma, Illustrator and Inkscape all pad files with data only they read. Browsers never render it.
2. Coordinate precision
74.98399992065430 renders identically to 74.984. Dropping to 2–3 decimals is the single biggest win on path-heavy artwork — often half the file.
3. Empty and nested groups
<g> wrappers that mirror the editor's layer panel but apply no transform or style.
4. Unused defs
Gradients, filters, masks and symbols defined but never referenced by any shape.
5. Editor IDs and attributes
id="Layer_1", data-name, xmlns:serif, style attributes with no visual effect.
6. Whitespace
Pretty-printed indentation and newlines — great for humans, dead weight for machines.
7. Embedded raster images (the trap)
A base64 PNG hiding inside <image> can be 95% of the file size, and no SVG optimizer can shrink it. If your "SVG" is mostly an embedded bitmap, the honest fix is either re-exporting the artwork as true vectors or shipping an optimized WebP/JPEG instead.
How much can you actually save?
- Illustrator exports: 50–80%
- Sketch: 40–70%
- Figma: 30–60%
- Hand-written SVGs: 5–15%
And an optimized SVG is plain text, so gzip/Brotli squeezes another 50–70% on the wire. The two stack — do both.
Automate it
If the same SVGs ship in an app, make optimization a compile step, exactly like minifying JavaScript:
- Vite: vite-plugin-svgo
- Webpack: svgo-loader
-
Any CI:
npx svgo -f src/icons -o dist/icons
Keep editable originals in the design repo, let the pipeline emit optimized files, and nobody has to remember anything again.
The full guide — with a browser-based optimizer (SVGO running client-side, no upload) and a batch processor for whole icon sets — is at svgeditor.dev.
Top comments (0)