How to Optimize SVG Files for the Web
Smaller SVGs, no visible difference.
Posted 2026-03-08
Most SVGs on the web are 2–4× larger than they need to be. Figma, Illustrator, and Inkscape all inject metadata, hidden layers, and verbose path data on export, and that weight ships to every user. The good news: optimizing SVGs is entirely mechanical and can be done in your browser.
What gets stripped
A typical optimizer applies 30–40 rules that each do one thing. The biggest wins come from:
- Metadata —
<metadata>,<title>,<desc>, Inkscape namespaces, and Figma comments. Visually irrelevant. - Comments and CDATA — never shown, never useful in production.
- Hidden layers — elements with
display="none"or opacity 0 that the exporter left behind. - Redundant transforms — a
translate(0,0)or a collapsed matrix that does nothing. - Precision — path coordinates rounded to the nearest pixel instead of 6 decimal places.
- Default attributes —
fill="black"on an element that’s already black. - IDs — unused or auto-generated IDs that bloat the file.
What to keep
- viewBox — without it, responsive scaling breaks.
- Accessible titles — if the SVG is content (not decoration), keep
<title>and<desc>for screen readers. - Semantic class names — if you animate or style the SVG from CSS, don’t let an optimizer rename the classes.
Running the optimizer
Paste your SVG into the SVG Optimizer and click optimize. It runs in your browser — nothing gets uploaded — and reports the before/after size.
For a typical Figma export expect 30–60% savings. For hand-written SVG, savings are smaller (usually 10–20%) because there’s less cruft to strip.
When optimization goes wrong
Aggressive optimization can break a few specific things:
- Animations referring to elements by ID will break if IDs are renamed.
- Scripts that query for specific class names will fail if classes are minified.
- Filters with rare effects may render differently if numeric precision drops too far.
If an optimized SVG doesn’t render correctly, re-run with cleanupIds: false or removeHiddenElems: false as starting points, then bisect the plugin list until you find the one that broke it.
Automating it
For builds, use the npm svgo package as part of your asset pipeline. For one-offs, the in-browser tool is faster. Either way, the goal is the same: ship only what the browser needs.