How to Minify SVG
SVG minification removes unnecessary data from SVG files — metadata, whitespace, comments, and verbose attribute names — reducing file size without changing the visual output.
About How to minify SVG
SVG files exported from design software like Illustrator, Figma, or Inkscape include significant amounts of non-visual data: XML namespaces, editor metadata, empty groups, verbose decimal precision, and descriptive comments. None of this data affects how the SVG renders in a browser, but all of it adds to file size.
What SVG minification removes: — XML comments (<!-- ... -->) left by editors or generators — Editor-specific namespaces (inkscape:, sodipodi:, xmp:) — Empty group elements (g tags with no visible content) — Excessive decimal precision — path coordinates rarely need more than 2 decimal places — Whitespace between XML elements (spaces and newlines in the markup) — Default attribute values (attributes that match the SVG default can be omitted) — DOCTYPE and XML declarations (not required in inline or referenced SVGs) — title and desc elements (useful for accessibility but not for production icons)
Typical size reduction from minification: Most SVG files exported from Illustrator or Figma reduce by 30–60% after minification. Complex traced SVGs with many paths can reduce by 70%+ after both node simplification and minification.
How to minify SVG for web use: 1. Export the SVG from your design tool. 2. Upload to the SVG Cleanup tool above. 3. Download the minified version. 4. Reference or inline the minified SVG in your HTML.
For web performance, inline SVGs are fastest because they require no additional HTTP request. Minified inline SVGs should be as compact as possible — every byte of SVG in your HTML delays first contentful paint.
Tools that automate SVG minification in build pipelines: SVGO (the underlying engine used by most tools), vite-plugin-svgo, next/image for SVGs, and imagemin-svgo for Webpack.