SVG Optimizer

What this tool does

This SVG optimizer takes the raw markup of an SVG file and rewrites it as a smaller, cleaner version that renders identically. SVGs exported from design tools are usually padded with material that no browser needs: editor metadata, XML comments, namespaced bookkeeping attributes, empty groups, and coordinates printed to six or more decimal places. The tool parses your SVG with the browser’s native DOMParser, walks the element tree, removes that cruft, and serializes the result compactly. It then shows you the before and after byte size and the percentage saved. Everything happens on your device — the SVG is never sent anywhere.

Why you might need it

Smaller SVGs load faster, and on an icon-heavy page the saving adds up across dozens of files. An SVG straight out of Illustrator, Figma, Inkscape or Sketch often carries hundreds of bytes of editor-specific noise that serves no purpose once the file ships. Inline SVGs embedded directly in HTML benefit even more, because every redundant byte is parsed and stored on every page view. Cleaning the markup also makes it far easier to read and edit by hand: once the inkscape:* and sodipodi:* attributes are gone, the actual shapes are no longer buried.

How to use it

1. Paste your SVG markup into the input box, or drop a .svg file onto it.
2. Review the optimisation options. <desc> removal and number rounding are on by default; <title> removal is off to preserve accessibility.
3. If you keep number rounding on, pick a precision — 2 places is a safe default for most artwork.
4. Click Optimise SVG, or press Ctrl/Cmd + Enter.
5. Check the before/after sizes, then copy the result or download it as a .svg file.

Common pitfalls

The most important toggle to think about is <title>. A <title> element is the accessible name of the graphic — screen readers announce it. If your SVG is decorative, removing the title is fine; if it conveys meaning, keep it. Number rounding is the other thing to watch. At precision 2 or higher the visual change is imperceptible, but rounding to 0 decimal places on a path with fine curves can visibly distort it. If a shape looks wrong after optimising, raise the precision and try again. Finally, the tool needs well-formed XML: if you paste a fragment with an unclosed tag or a stray <, you will get a clear parse error rather than a broken file.

Tips and advanced use

For the smallest possible output, leave rounding on and choose the lowest precision that still looks correct — test by opening the downloaded file. If you maintain an icon set, run each icon through once after exporting; the editor attributes are removed every time regardless of the toggle settings, so even a default run is worthwhile. When you embed SVGs inline in components, optimise first so your HTML stays lean. And because the whole process is client-side, this is a safe step for unreleased brand assets and confidential diagrams — nothing about your file leaves the browser tab.