SVG Optimizer: Minify Source and Strip Metadata

Paste SVG source, get minified output with metadata, comments, and editor cruft removed. Client-side, lightweight.

SVG files exported from Illustrator, Figma, or Sketch are full of metadata, comments, namespace declarations, and editor IDs that browsers don't need. This optimizer strips that cruft and minifies whitespace — typical reduction is 30-70% on hand-drawn icons, 10-30% on complex illustrations. Pure client-side, no upload.

How it works

Paste your SVG source

Tool runs minification

Compare size

Visual preview

Copy output

How does this compare to SVGO/SVGOMG?

SVGO (Node.js library) and SVGOMG (its web version by Google) are the gold standard — they have 50+ plugins for advanced optimization (path merging, transform collapsing, color value optimization, etc.). Our tool is a lightweight subset that covers the 80% case (metadata + whitespace removal). For complex illustrations, use SVGOMG; for quick icon cleanup, ours is faster.

Why does optimized SVG sometimes break?

Three common causes: (1) JavaScript inside the SVG depends on IDs our optimizer didn't remove but a CSS selector targets a removed attribute, (2) gradient or pattern IDs get stripped, (3) animation timing depends on IDs. Test the visual preview always — if broken, fall back to the original or use SVGOMG with conservative settings.

Should I inline SVG or use <img src='file.svg'>?

Inline for icons that need CSS color theming or animation (fill: currentColor works). Use external or background-image for SVGs that don't need styling, since the browser can cache them across pages. Optimized inline SVG is critical because it sits in your HTML — every kilobyte matters.

What's the smallest SVG file I should ship?

Icons should be under 1KB after optimization. Complex illustrations under 50KB. If a single SVG exceeds 100KB, consider whether it should be raster (PNG/WebP) instead — SVG is best for geometric or icon-like graphics, not photographs or complex shading.