SVG optimizer

How to use the SVG optimizer

  1. Drag-and-drop SVG files or paste the raw XML into the editor.
  2. The optimizer runs SVGO internally with 30+ passes: remove XML comments, collapse groups, round decimal precision, merge paths, strip editor metadata.
  3. Toggle each optimization pass individually — some aggressive passes (like convertPathData) can break animations or gradient references.
  4. Compare before/after byte count and the rendered preview side-by-side to confirm nothing broke visually.
  5. Copy the optimized SVG, download as a file, or export as a React component.

When to use it

Design-tool exports (Figma, Illustrator, Sketch) include 40-70% overhead — editor metadata, redundant precision, unused definitions. Run every SVG through the optimizer before committing it to your repo. Don't over-optimize: precision below 2 decimals can cause visible kinks on small icons, and removing viewBox breaks scaling. Alternative: SVGOMG is the original web frontend for SVGO; this tool adds batch processing and React component export.

Example

A 12 KB Figma-exported icon compresses to 1.8 KB after optimization — 85% reduction from removing editor comments, data-name attributes, and unused <defs>.

Frequently asked questions

Will optimization break my SVG animations?
Sometimes. The convertPathData and mergePaths passes can rewrite paths that SMIL animations or CSS transforms rely on. Disable those passes if your SVG animates.
What's a safe precision level?
2 decimal places for icons (16-48px), 3 for medium illustrations, 4+ for high-resolution artwork. Below 2 shows visible kinks on curves.
Should I minify production SVGs?
Yes — the runtime cost is zero and bytes on the wire are reduced 40-70%. Keep the unoptimized source in your repo and run optimization in the build step.
Does it remove fill attributes?
Only if you enable removeAttrs. Removing fill lets you recolor the icon via CSS color, but breaks any multicolor artwork. Default: off.
Can I export as a React component?
Yes — the output tab includes a ready-made React functional component with props spread, so colors and sizes are controllable.

Related tools

Last updated: 2026-04-22