SVG Optimizer — Strip Metadata, Whitespace, Editor Cruft

Guide

About SVG Optimizer

Strip XML comments, editor metadata (Adobe Illustrator, Figma, Sketch, Inkscape namespaces), unused namespaces, and whitespace from SVG markup. Optionally strip <code>width</code>/<code>height</code> for responsive use (preserves <code>viewBox</code>). Reports byte savings.

What designer SVG looks like before optimization

A logo exported from Figma might be 8 KB; the same logo hand-written is under 1 KB. The difference is metadata — namespaces, editor IDs, transform matrices, comments. None of it affects rendering.

This optimizer applies the same transformations as svgo would:

Strip comments and editor metadata
Inline transforms into path coordinates
Convert paths to relative form (often shorter)
Trim coordinate precision
Remove unused IDs
Collapse empty groups
Normalize colors

Common workflows

Optimize a logo. Designer hands you logo.svg at 8 KB. Optimize, get 1.2 KB. Same visual, faster page load.

Build an icon library. Optimize each SVG, drop into your project. Inline into components for zero-request icons.

Audit before bundling. Optimize, see savings. If the file already optimizes lean, your bundler had already done the work.

Make a designer-export responsive. Strip width/height, keep viewBox. Now width: 100% works without explicit sizing.

When to skip optimization

Animated SVG with editor-meaningful structure
SVG you plan to re-edit in the design tool
SVG with embedded raster images (PNG paths inside)

For everything else — production-ready icons, logos, illustrations — optimize.

Frequently asked questions

What metadata gets stripped?

Adobe namespace (xmlns:i, xmlns:graph), Inkscape namespace (xmlns:inkscape, xmlns:sodipodi), Figma metadata, Sketch metadata, comments, empty groups, default attribute values.

Why strip width/height?

For responsive SVG that fills its container, you want viewBox only — width/height force a fixed size. Toggle the strip if your usage benefits.

Path optimization?

Reformatted: long decimals trim, redundant moves collapse, relative coordinates favored where shorter. The visual output is identical.

Are colors normalized?

Yes — #FFFFFF → #fff, rgb(255, 0, 0) → red when shorter.

Will it break interactive SVG?

No — id attributes are preserved unless we detect them as unused. Interactive SVG (CSS targeting via class, JS via id) survives.

How much smaller?

Designer-exported SVG often shrinks 50-80%. Hand-written SVG might gain only 10%.

Related tools

Last updated: 2025-01-15