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 a lot of invisible weight: XML comments, metadata blocks, Inkscape/Sodipodi/Illustrator namespace attributes, redundant decimal places, and wrapper groups with no children. This tool parses your markup with the browser's own DOMParser, applies the cleanups you enable, and serializes a tighter SVG back out. Toggle each step in Settings, set the coordinate rounding precision, and read the Before, After and Saved stats to confirm the gain. Use it to lighten inline SVG icons, sprite sheets, logos and illustrations, or just to tidy messy markup before pasting it into code.

How to use SVG Optimizer

1. Paste or pipe your SVG source into the input box.
2. Open Settings to choose which cleanups run: round coordinates, remove comments, strip metadata and editor attributes, remove empty groups.
3. If coordinate rounding is on, set the precision (0-5 decimal places) to balance size against accuracy.
4. Read the Before, After and Saved size stats to see how much smaller the result is.
5. Copy the optimized SVG from the output box and paste it into your project.

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"><g></g><circle cx="5" cy="5" r="3"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="5" r="3"/></svg>

Frequently asked questions

What exactly does the optimizer remove?

Depending on which toggles you enable: XML comments, <metadata>, <title> and <desc> elements, editor-specific namespace attributes (such as Inkscape, Sodipodi and Illustrator), and groups (<g>) that contain no children. It can also round numeric attributes and path data to a chosen number of decimals.

Will rounding coordinates change how my SVG looks?

Rounding to a low precision can shift points by a tiny fraction of a unit, which is usually invisible but shrinks the file. Raise the precision (up to 5 decimals) if you need exact geometry, or turn the round-coordinates option off entirely to keep numbers untouched.

Does it guarantee the smallest possible file?

No. It performs safe, structural cleanups (comments, metadata, editor attributes, empty groups, coordinate rounding) but does not merge paths, minify styles or apply every transformation a heavyweight library might. For most icons and exports the savings shown in the Saved stat are substantial.

What if my SVG is invalid?

If the markup cannot be parsed as SVG, an error message is shown and no output is produced. Fix the markup (for example, balance your tags) and the result updates automatically.

Is my SVG uploaded anywhere?

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