Vector Optimization: Streamlining SVGs for Web
How to clean up unnecessary XML namespaces, editor tags, and coordinates in SVGs.
SJ
Sarah Jenkins
Contributing Author · Squoosh Next BlogSVG files exported from tools like Adobe Illustrator or Figma often contain substantial bloat. Adobe Illustrator embeds proprietary xlink namespaces and extended metadata for its own round-trip editing. Figma exports unused symbol definitions and preserves per-layer IDs from its internal node graph.
SVGO, the Node.js optimization tool, removes these artifacts through a configurable plugin pipeline. Key optimizations include removing editor namespaces, collapsing unnecessary group elements, converting absolute coordinates to relative paths, merging adjacent path commands, and rounding floating-point values to 2 decimal places. These transforms alone typically achieve a 40–60% size reduction.
For animated SVGs, ensure the removeHiddenElems plugin is disabled since it may incorrectly strip elements that animate into view.
Key Takeaways
SVG files exported from tools like Adobe Illustrator or Figma often contain substantial bloat.
Adobe Illustrator embeds proprietary xlink namespaces and extended metadata for its own round-trip editing.
Figma exports unused symbol definitions and preserves per-layer IDs from its internal node graph.
js optimization tool, removes these artifacts through a configurable plugin pipeline.
Try It in the Workspace
Everything discussed in this article can be tested directly in Squoosh Next — no sign-up, no upload, 100% client-side.