SVG Optimizer

// What SVG optimization actually removes

Vector editors often save more than the browser needs: document metadata, comments, editor namespaces, long decimal coordinates, redundant groups, and repeated style values. That extra XML does not make the picture sharper. It only adds bytes to a file, an HTML document, or a JavaScript bundle.

This optimizer runs SVGO's default plugin set in multiple passes. Each plugin applies its focused transformation, and multipass mode repeats the pipeline while another pass still makes the output smaller. Number precision controls how aggressively coordinates are rounded. Three decimal places is the balanced default; one decimal place saves more but deserves a close preview on detailed curves.

// The settings that change how you ship the SVG

Minified output is best when the file goes straight into a build. Prettified output costs a few whitespace bytes but produces cleaner diffs when people will review the markup. Stripping data attributes removes editor and application hooks, so turn it off when your own code reads a data-* value.

Removing width and height lets CSS control the rendered size. The viewBox stays locked on because it defines the SVG's internal coordinate system and preserves responsive scaling. IDs also stay unchanged because CSS, scripts, or an external use element may reference them from outside the file. If the source has numeric dimensions but no viewBox, SVGO derives one before removing them. Turn dimension removal off when an image element must keep its intrinsic width and height.

// Read both raw and gzip size

The before and after figures count actual UTF-8 bytes. The gzip figure uses the browser's native compression stream on the optimized result, which is closer to the payload a correctly configured web server sends. If that browser API is unavailable, the page shows no gzip number rather than estimating one.

Copy data URI produces percent-encoded UTF-8 ready for a CSS url() value. The preview loads the optimized markup as a Blob URL inside an image element. That keeps scripts in hostile SVG input out of the page's document and blocks external references, while CSS or SVG animations can still play. The page names a render failure when the browser cannot show the result. Preview isolation is not sanitization, so inspect third-party SVG before inlining its markup into HTML or a component.

SVGO runs synchronously in the browser, so this page accepts SVG markup up to 8 MB to bound the work on unusually complex exports. Split or simplify a larger source before optimizing it here.

// fair questions

How does SVG optimization work?

SVGO parses the SVG as XML and runs focused transformations that remove metadata and comments, shorten numeric values, merge compatible paths, simplify styles, and discard redundant structure. Multipass mode repeats that pipeline while another pass still makes the result smaller.

Is optimizing an SVG lossy?

SVGO aims to preserve the rendered image, but coordinate rounding can be visually lossy at low precision. Three decimals is a conservative default for most icons. Precision 1 may shift fine curves or tiny details, so compare the on-page preview and keep the original source file.

Why is my SVG file so large?

Common causes are editor metadata, verbose path coordinates, repeated styles, hidden layers, and a very high path count. An embedded PNG or JPEG can also dominate the file, because optimizing the surrounding XML does not recompress raster pixels stored inside the SVG.

What is a viewBox and why should I keep it?

The viewBox maps the SVG's internal coordinates to whatever size it renders at. Keeping it lets the same artwork scale responsively through CSS. Removing it can crop the drawing or make an SVG without fixed dimensions lose its usable aspect ratio, so this tool never offers that unsafe configuration.

Will optimization rename or remove SVG IDs?

No. This tool disables SVGO's ID cleanup because a host stylesheet, script, or external use reference may depend on an ID that looks unused inside the file. Preserving IDs costs a few bytes but avoids a break the isolated preview could not reveal.

How much smaller will my SVG get?

It depends on the source. A clean hand-written icon may barely change, while a design-tool export with metadata and long coordinates can shrink substantially. The inline byte bar reports the exact result for your file, and the gzip figure shows how much reaches the network when supported.