What optimization actually strips
Design tools export SVGs stuffed with data the browser never needs. An optimizer (this tool, like SVGO) removes the non-visual weight without changing a single rendered pixel:
| Removed | Why it’s safe |
|---|---|
Editor metadata (xmlns:inkscape, sodipodi) | Inkscape/Illustrator bookkeeping |
Comments & <title>/<desc> (optional) | Not rendered (keep <title> for a11y) |
Excess decimal precision (10.00001 → 10) | Imperceptible, often the biggest win |
| Default attribute values | Browser assumes them anyway |
| Hidden/empty elements | Invisible |
For icons exported from Figma or Illustrator, expect 30–70% size reduction — the precision trimming and metadata removal do most of the work.
Optimize, then compress — they stack
Optimization (cleaning the XML source) and HTTP compression (gzip/brotli on the server) are different layers, and using both multiplies the savings. Optimize the SVG here to remove redundant code, then make sure your server serves SVGs with gzip or brotli enabled. SVG is plain text, so it compresses extremely well — the combined effect can cut the over-the-wire payload by 80–95%. Neither replaces the other.
What it preserves
The optimizer is conservative about anything visual or functional: it keeps the standard SVG and xlink namespaces, preserves animation elements (<animate>, <animateTransform>) and CSS in <style> blocks, and leaves your paths intact. So animated and interactive SVGs survive optimization. Keep a <title> element if you rely on it for accessibility — that’s a deliberate choice, since removing it shrinks the file but loses the screen-reader label.
A note on crisp icons
If optimized icons look blurry at small sizes, optimization isn’t the cause — it’s usually fractional coordinates that don’t land on the pixel grid. Icon sets like Lucide and Heroicons use an integer 24×24 viewBox precisely to stay crisp. Everything here runs in your browser via the DOMParser, so proprietary logos and assets never upload. Pair this with the SVG to React converter when the optimized SVG is headed into a component.