SVG

SVG Optimizer

Clean and compress SVG markup with SVGO, preview it, and compare bytes

Vector Tools
πŸ”’ 100% client-side β€” your data never leaves this page
Maintained by ToolsKit Editorial Teamβ€’Updated: August 23, 2026β€’Reviewed: August 23, 2026
SVG
Optimized result

Optimized markup, preview, and byte savings will appear here.

About this tool

SVG Optimizer runs the browser build of SVGO against pasted markup or a local SVG file up to 2 MB. The default preset removes comments, metadata, editor residue, redundant groups and attributes, and simplifies numeric and path data. You can run multiple passes, choose numeric precision, preserve the responsive viewBox, and remove fixed width and height attributes. Scripts are removed before the result is previewed through a Blob URL. The byte comparison uses UTF-8 Blob sizes. Optimization can alter IDs, styles, precision, filters, or external references, so visually compare complex artwork and test any CSS or JavaScript integration before replacing production assets.

Scenario Recipes

01

Prepare an exported icon for a production bundle

Goal: Reduce transfer size without breaking responsive rendering

  1. Paste the exported SVG, keep viewBox enabled, and start with three-decimal multipass optimization.
  2. Compare before and after byte counts and inspect the rendered preview at several sizes.
  3. Test CSS classes, IDs, masks, and external references in the target app before replacing the source asset.

Result: A smaller SVG with an explicit visual and integration verification trail.

Frequently Asked Questions

What does SVGO remove by default?

The preset can remove comments, metadata, editor data, hidden or redundant structures, and simplify attributes, transforms, numbers, colors, and paths.

Should I preserve viewBox?

Usually yes. A viewBox allows an SVG to scale responsively even when fixed width and height attributes are removed.

What number precision should I choose?

Three decimals is a practical default. Detailed technical artwork may need more precision, while simple icons can often use less.

Why can an optimized SVG look different?

Aggressive precision, path conversion, ID cleanup, style merging, filters, masks, external resources, or CSS dependencies can change rendering.

Does the optimizer remove scripts?

Yes. The configuration includes SVGO removeScripts before creating the local preview, but untrusted SVGs still deserve careful review.

Is SVG source uploaded?

No. Parsing, SVGO optimization, byte measurement, preview Blob creation, and download all happen locally.

Keep browsing