SVG Optimizer

What is SVG optimisation?

SVG files exported from design tools like Figma, Illustrator, or Sketch are bloated with editor metadata, redundant attributes, unused definitions, and verbose path data. SVGO (SVG Optimizer) is the industry-standard tool for removing all of this without changing the visual appearance of the image. Savings of 20–80% are common on typical exported SVGs.

Smaller SVGs mean faster page loads, lower bandwidth usage, and better Lighthouse scores — especially important for icons, logos, and illustrations used above the fold.

How to use this SVG Optimizer

1. Paste SVG markup or drop a .svg file onto the dropzone.
2. Click Optimise SVG. Processing runs in a background Web Worker so the page never freezes.
3. Compare the before/after visual preview and the size savings breakdown.
4. Adjust plugins using the Plugins panel if the output looks wrong — for example, disable "Remove viewBox" if the SVG changes size.
5. Download the optimised SVG, or export as PNG at 1×, 2×, or 4× resolution via the browser Canvas API.

Will optimisation break my SVG?

The default plugin selection is conservative and safe for the vast majority of SVGs. The visual preview lets you verify the result before downloading. Some risky operations are disabled by default:

• Remove viewBox — disabled by default. Removing it can break fluid/responsive behaviour.
• Remove width/height — disabled by default. Removing fixed dimensions can affect layout.
• Clean up IDs — safe unless your CSS or JavaScript references specific IDs in the SVG.

Why process SVGs in the browser?

SVG files used in design systems and products frequently contain proprietary illustrations, brand assets, and confidential iconography. Processing them client-side with SVGO's browser build means your artwork never leaves your machine — no upload to a third-party server, no risk of intellectual property exposure.