Beautify SVG Online — Free SVG Formatter

Beautify SVG markup instantly with our free online tool. Format SVG with readable indentation. All processing in your browser.

Loading…

SVG Beautification

Beautify SVG online. Format markup with readable indentation — browser-local processing.

Features

Format SVG markup with readable indentation without changing how the graphic renders.

Beautify SVG

Format SVG markup with readable indentation without changing how the graphic renders.

Basic example

Input SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="blue"/>
  <rect x="20" y="20" width="60" height="60" fill="red"/>
</svg>

Minified SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="blue"/><rect x="20" y="20" width="60" height="60" fill="red"/></svg>

Minification options

Remove Comments

Removes all SVG comments () from code

Comparison with/without option:

Original code

<svg>
  <!-- This is a comment -->
  <circle cx="50" cy="50" r="40"/>
</svg>

With removeComments: true

<svg><circle cx="50" cy="50" r="40"/></svg>

With removeComments: false

<svg><!-- This is a comment --><circle cx="50" cy="50" r="40"/></svg>

Collapse Whitespace

Collapses multiple whitespace characters into single spaces

Comparison with/without option:

Original code

<svg>
    <text>   Multiple   spaces   </text>
    <g>  Group  </g>
</svg>

With collapseWhitespace: true

<svg><text> Multiple spaces </text><g> Group </g></svg>

With collapseWhitespace: false

<svg><text>   Multiple   spaces   </text><g>  Group  </g></svg>

Remove Metadata

Removes metadata elements from SVG code

Comparison with/without option:

Original code

<svg>
  <metadata>Some metadata</metadata>
  <circle cx="50" cy="50" r="40"/>
</svg>

With removeMetadata: true

<svg><circle cx="50" cy="50" r="40"/></svg>

With removeMetadata: false

<svg><metadata>Some metadata</metadata><circle cx="50" cy="50" r="40"/></svg>

Remove Empty Attributes

Removes attributes with empty values

Comparison with/without option:

Original code

<svg>
  <circle cx="50" cy="50" r="40" id="" class=""/>
</svg>

With removeEmptyAttributes: true

<svg><circle cx="50" cy="50" r="40"/></svg>

With removeEmptyAttributes: false

<svg><circle cx="50" cy="50" r="40" id="" class=""/></svg>

Remove Hidden Elements

Removes elements with display:none or visibility:hidden styles

Comparison with/without option:

Original code

<svg>
  <circle cx="50" cy="50" r="40" style="display:none"/>
  <rect x="10" y="10" width="20" height="20" style="visibility:hidden"/>
</svg>

With removeHiddenElements: true

<svg></svg>

With removeHiddenElements: false

<svg><circle cx="50" cy="50" r="40" style="display:none"/><rect x="10" y="10" width="20" height="20" style="visibility:hidden"/></svg>

Features

Our SVG optimization tool offers a complete set of features for working with SVG files.

Minify SVG

Remove unnecessary whitespace, comments, metadata and hidden elements from SVG files to reduce file size while preserving visual quality.

Unminify SVG

Restore readable formatting to minified SVG code with proper indentation and line breaks for easy editing and debugging.

Optimize SVG

Go beyond minification by removing editor metadata, simplifying paths, and cleaning up unused elements for maximum file size reduction.

How SVG Optimization Works

SVG optimization goes beyond simple minification. While minification removes whitespace and comments, optimization analyzes the SVG structure to remove editor metadata (from tools like Illustrator or Inkscape), simplify path data, merge compatible elements, and strip hidden or unused definitions. This can reduce SVG file sizes by 20-60% without any visual change.

SVG Optimization vs Minification — What's the Difference

Minification is a subset of optimization. Minifying an SVG removes whitespace, line breaks and comments. Optimizing additionally removes metadata, editor artifacts, simplifies coordinates, and cleans unused defs. Both approaches are safe and preserve the visual output. Use our tool for both operations — paste your SVG and click the appropriate button.