SVG minification reduces file sizes, improves loading times and optimizes web performance. It can reduce file size by 20 to 60% on average.

How does SVG minification work?

Minification removes spaces, comments, metadata and unnecessary characters from SVG code while preserving all SVG functionality. The code remains functional but is more compact.

Can I unminify SVG code?

Yes, our tool can unminify minified SVG code to make it more readable and easier to maintain.

Is the code processed securely?

Absolutely. All processing happens in your browser. No data is sent to our servers, ensuring complete privacy.

Minify & Unminify SVG Online — Free SVG Optimizer

Minify and unminify your SVG code instantly to reduce your file sizes and improve your website performance. Our free online SVG optimizer removes unnecessary whitespace, comments, metadata and optimizes structure while preserving all SVG functionality. Instant and secure processing, no registration required.

SVG Minification

Compressing SVG files by removing whitespace, comments, metadata and unnecessary characters while preserving all SVG functionality

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>

Other minification tools