SVG Optimizer

What is SVG Optimizer?

The SVG Optimizer is a free, in-browser tool for web designers, icon authors and front-end developers who need to trim hand-written or exported SVG before shipping it. Vector editors add invisible weight: XML comments, metadata blocks, Inkscape/Sodipodi/Illustrator attributes, redundant decimals, no-op transforms, wrapper groups, and IDs and defs nothing references. Turn each cleanup on or off in Settings, then paste the markup or drop an .svg file, watch the Original and Optimized renders update side by side, and read the Before, After, Saved, Gzip and Brotli stats to confirm the gain. Copy the result or download it as a .min.svg. Use it to lighten inline icons, sprite sheets, logos and illustrations.

How to use SVG Optimizer

1. Paste your SVG, or drop/upload an .svg file — the markup fills the input box.
2. Open Settings and toggle exactly the cleanups you want: round coordinates, remove comments, metadata and editor attributes, empty groups, unused IDs and defs, collapse transforms, minify inline styles, shorten hex colors, drop default values and minify whitespace.
3. If coordinate rounding is on, set the precision (0-5 decimals).
4. Compare the Original and Optimized renders side by side to confirm the artwork still looks right.
5. Read the Before, After, Saved, Gzip and Brotli stats to see the real size gain.
6. Copy the optimized SVG, or download it as a .min.svg file.

Examples

<svg xmlns="http://www.w3.org/2000/svg"><!-- Generator: Sketch --><title>icon</title><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1.00000 2.49999 L10.333333 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1 2.5 L10.33 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#FFFFFF" fill-opacity="1" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#fff" width="24" height="24"/></svg>

Frequently asked questions

What exactly does the optimizer remove?

With the matching toggles on: XML comments, <metadata>, <title> and <desc> elements, editor namespace attributes (Inkscape, Sodipodi, Illustrator), empty groups, IDs that nothing references and unreferenced <defs>. It can also round numeric attributes and path data, collapse no-op transforms, minify style attributes and <style> CSS, shorten hex colors (#ffffff to #fff) and drop default presentation attributes such as fill-opacity="1".

Will rounding coordinates change how my SVG looks?

Rounding to a low precision can shift points by a tiny fraction of a unit, usually invisible but smaller. Raise the precision (up to 5 decimals) for exact geometry, or turn coordinate rounding off to keep numbers untouched.

Can I load a file and preview the result?

Yes. Drop or upload an .svg file (or paste the markup) and the Original and Optimized renders appear side by side so you can spot anything that broke. Then copy the output or download the optimized .min.svg — nothing is uploaded; the file is read locally.

What do the Gzip and Brotli figures mean?

The Gzip size is measured by actually compressing the optimized SVG in your browser, so it reflects the real bytes over a gzip-enabled connection. The Brotli figure is an estimate derived from that gzip size (brotli usually compresses text a little smaller); a real brotli encoder is too heavy to bundle, so it is marked with a tilde.

Is my SVG uploaded anywhere?

No. Parsing, cleanup, size measurement and serialization all happen locally in your browser with the built-in DOMParser. Nothing is sent to a server, so the tool works offline and your artwork stays private.