How to optimize SVG files (with SVGO)
SVGs exported from design tools carry editor metadata, hidden layers and bloated numbers. Optimizing them can cut file size by half or more — and SVGO automates it.
What bloats an SVG
- Editor metadata and comments (Illustrator/Figma junk).
- Excessive decimal precision on path coordinates.
- Hidden elements, empty groups and unused
ids. - Inline styles that could be attributes.
Optimizing with SVGO
SVGO is a Node tool (and the engine behind many web optimizers). A quick run:
npx svgo icon.svg -o icon.min.svgSettings to watch
Be careful with plugins that remove viewBox (breaks scaling) or strip ids you reference from <use> or CSS. Keep currentColor intact so icons stay recolorable. Round coordinates sensibly — 2–3 decimals is usually plenty.
Note: icons served through IconStash / Iconify are already optimized, so you can skip this step for those.
Frequently asked questions
Does optimizing SVG reduce quality?
No — vectors are math, so removing metadata and trimming precision shrinks the file without visible quality loss.
Will SVGO break my icon?
Only if aggressive plugins remove something you rely on (like viewBox or referenced IDs). Review the config for icon use.