SVG Optimizer

How to use

1. Paste your SVG markup, or switch to the Upload File tab and drop a .svg file.
2. Toggle the plugins you want. Defaults match SVGO’s preset-default; the eight primary toggles cover the most common decisions.
3. Click Optimize SVG. The before / after preview shows byte counts, the saved percentage, and rendered visuals so you can spot regressions immediately.
4. Use Copy output for a quick paste into your codebase, or Download .svg to save the cleaned file.

What gets removed

SVGO removes editor metadata, comments, hidden elements, default attributes, and other markup that does not affect rendering. It also rewrites path data, merges adjacent paths, and shortens color values. Real-world icons typically shrink by 40–70%, with the bulk of the savings coming from convertPathData, mergePaths, and cleanupNumericValues.

The two risky toggles

Remove viewBox and Remove width/height are off by default for a reason: an SVG without viewBox loses its responsive scaling, and one without width/height attributes inherits the rendering box from its parent — which is rarely what you want for downloadable icons. Turn them on only when you fully control the embedding context (for example, sprite sheets where the parent <use> sets the size).

When to optimize

• Production builds: ship icons through your bundler with a vite-plugin-svgo or similar step. Use this tool to spot-check the output without spinning up a CLI.
• Hand-authored or exported SVGs: Figma, Illustrator, and Sketch all leave editor metadata and unused id attributes that SVGO strips cleanly.
• Inline SVGs in HTML: if you embed the markup directly, every kilobyte counts — the document blocks first paint until parsed.

Single-file by design

This tool optimizes one SVG at a time. Batch optimization, custom plugin authoring, and CI pipelines belong to the SVGO command-line tool — install it with npm install -g svgo and run svgo input.svg -o output.svg against folders or globs. Once you find the right toggle combination here, copy the equivalent svgo.config.js snippet from the SVGO docs and ship the same configuration into your build.

Need to convert SVG to a raster format afterwards, or extract it for React? Use ZeroTool’s SVG to PNG Converter and SVG to JSX on the optimized output.