Skip to main content
DevBench

How to minify an SVG

  1. Upload an SVG file or paste its markup — either works, and the file never leaves your browser.
  2. Seven cleanup toggles are on by default: XML comments; metadata, title and desc elements; Inkscape/Sodipodi editor data; hidden elements; excess whitespace; empty groups; and default attribute values such as x="0".
  3. Read the report: original size, optimized size, percentage saved, and a list of exactly what was stripped.
  4. Copy the cleaned markup or download the optimized file.

Where the bloat comes from

SVGs exported by design tools carry luggage the browser ignores: editor namespaces, layer metadata, comments from whoever drew it, and verbose attributes for values that are already the default. Stripping them rarely changes the rendered result but often changes the file size noticeably — useful when the SVG is inlined in a stylesheet or shipped in a bundle where every KB counts. Inline SVGs benefit twice: fewer bytes in the markup, and fewer nodes for the browser to walk when it lays out the page. The removal list tells you what actually went, so a file that barely shrank is diagnosable rather than mysterious.

One accessibility trade-off

The metadata toggle also removes title and desc elements — the accessible names screen readers announce for standalone SVGs. If your icon is a meaningful image rather than decoration, turn that toggle off and keep them. This is a text-level optimizer rather than a rendering engine, so give complex artwork a quick visual check afterwards; the copy-and-download loop is fast enough to make that trivial.

Also useful: Image Format Converter, CSS Minifier, and HTML Minifier.