SVG Cleaner

Minify and clean SVG markup for smaller file sizes. All processing occurs locally in your browser.

Related Tools

Strips SVG markup down to a single compact line. It removes comments, collapses every run of whitespace to one space, deletes the gap between a closing and an opening tag, and removes spaces around braces, semicolons and colons. The result is shown back as plain text you can copy.

How to use it

Paste the SVG source into the box, replacing the small circle example if you like.
Press Clean SVG; the compacted markup appears directly underneath.
Select the result and copy it into your file or data URI.

Worked example

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

becomes<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="blue" /></svg>

The space before the self-closing slash is inside the tag and survives; the newline and indentation between the tags do not.

<svg>
  <!-- note -->
  <text>Hello   World</text>
</svg>

becomes<svg><text>Hello World</text></svg>

The comment is gone, and the run of three spaces inside the text node has collapsed to one.

When to use it

Shrinking a hand-written icon before inlining it in HTML.
Removing editor comments and indentation from an exported file.
Getting a one-line SVG to drop into a data URI or a JSX attribute.

What it does not do

The whitespace rule applies inside text nodes as well, so <text>Hello World</text> becomes <text>Hello World</text> and the rendered spacing changes.
The punctuation rule reaches outside tags too: a caption reading Note: hi comes back as Note:hi, and CSS inside a style block loses the spaces around its braces and colons.
It is not an optimiser: no attribute removal, no metadata, title or desc stripping, no path rewriting, and no check that the input is well-formed SVG.
It is a plain text transform and cannot distinguish markup from character data, so it will happily edit the visible words in a drawing as well as the structure.