SVG Optimizer

How to optimize an SVG: step by step

1. 1
   Paste your SVG or drop a file
   Paste raw SVG markup into the input area on the left, or drag and drop an .svg file directly onto the text area.
2. 2
   Choose your optimizations
   Toggle individual optimization passes: remove XML declaration, comments, metadata, Inkscape/Sodipodi namespaces, empty groups, hidden elements, default attributes, and round coordinate decimals.
3. 3
   Read the size stats
   The three cards at the top show original size, optimized size, and the percentage savings in real time as you adjust options.
4. 4
   Review the optimized output
   The right panel shows the cleaned SVG. Inspect it visually: the output is still valid, readable SVG that renders identically in the browser.
5. 5
   Copy or download
   Click Copy to grab the optimized SVG to your clipboard, or click Download to save it as optimized.svg ready for production use.

Frequently Asked Questions

What does SVG optimization do?

SVG optimization removes data that does not affect rendering: editor metadata, empty element groups, default attribute values, long decimal coordinates, and application-specific namespace attributes added by tools like Inkscape. The result is a smaller, cleaner file that renders identically.

Is this tool the same as SVGO?

This tool implements many of the same optimizations as SVGO (SVG Optimizer) but runs entirely in your browser using the DOM parser, with no server upload. The core passes: comment removal, metadata stripping, namespace cleanup, default attribute removal, and coordinate rounding: match SVGO's most popular plugins.

Will optimizing an SVG break it?

The optimization options here are conservative and do not restructure path data or merge shapes, so the visual output should be identical. The option most likely to cause issues is 'Remove default attribute values': disable it if you see unexpected visual changes.

What are editor namespaces?

Applications like Inkscape and Sodipodi add custom XML namespaces (xmlns:inkscape, xmlns:sodipodi) and attributes (inkscape:label, sodipodi:version) to SVGs they create. These attributes serve no purpose in a browser and can safely be stripped.

How much file size reduction should I expect?

Typical Inkscape-exported SVGs achieve 20–50% reduction. Simple hand-coded SVGs may see little savings. Files with many long decimal coordinates benefit greatly from the coordinate rounding pass.

Does rounding coordinates affect visual quality?

Rounding to 2 decimal places is imperceptible for icons and most illustrations at normal display sizes. If your SVG includes very fine detail at large print scale you can disable that pass.

Can I drag and drop an SVG file?

Yes. Drag any .svg file from your file system onto the input text area and the tool will read its contents instantly.

Is my SVG sent to a server?

No. All processing happens in your browser using the built-in DOM parser and XMLSerializer. No data ever leaves your machine.

What is the difference between base64 and URL-encoded data URL for SVG?

URL-encoded data URLs (data:image/svg+xml,[encoded]) are typically 10–15% smaller than base64 encoded ones (data:image/svg+xml;base64,...) because they avoid the ~33% expansion factor of base64 encoding.

Can I use this in my build pipeline?

This browser tool is ideal for one-off optimization. For automated build pipelines, install the SVGO npm package directly. This tool mirrors SVGO's main passes so the output will be comparable.