SVG Optimization: Smaller Vectors, Faster Pages
SVGs from design tools ship with astonishing baggage — editor metadata, redundant precision, empty groups, unused defs. Cutting 60–90% of file size with zero visual change is routine. Run yours through our SVG optimizer and watch the byte counter.
Where the bloat lives
| Source | Example | Safe to remove? |
|---|---|---|
| Editor metadata | <metadata>, sodipodi:*, inkscape:* | Always |
| Comments & doctype | <!-- Generator: … --> | Always |
| Excess precision | d="M12.000001 4.999997…" | Round to 2–3 decimals |
| Empty groups | <g></g> wrappers | Usually |
| Unused defs | Orphaned gradients/filters | Check references first |
| title/desc | Accessibility text | Keep if the SVG is meaningful content |
Precision: the big win
Path coordinates at six decimal places are sub-nanometer precision on screen. Rounding to two decimals typically halves path data with no visible change. (Very small viewBoxes may want three.)
Accessibility note
Don't strip <title> from meaningful images — it's the SVG's accessible name. For decorative SVGs, remove it and add aria-hidden="true" instead.
Inline vs external
Inline SVG saves a request and enables CSS styling (currentColor icons) but bloats HTML and isn't cached separately. External files cache well and gzip beautifully (SVG is text — expect ~60–70% transfer reduction on top of your optimization). Rule of thumb: inline icons and logos that need styling; external for illustrations. Recolor before shipping with the SVG color editor, and convert to components with the SVG to React converter.