How to Minify an SVG for the Web
Load your SVG file
Drag an SVG onto the drop zone or click Select SVG to choose one. The file is read directly in your browser with the FileReader API, so nothing is uploaded. A preview of the file name and original size appears once it loads.
Pick the cleanups to apply
Toggle the options you want: remove comments, remove metadata and editor data, clean auto-generated IDs, remove empty groups, and remove empty attributes. The XML declaration and whitespace between tags are always collapsed. Enable more options for a larger size reduction.
Optimize, compare, and download
Click Optimize SVG to run the cleanup. You see the original size, the new size, the percent reduction, and a before and after visual preview. Click Download SVG to save the minified file, or Optimize Another to start over with a fresh file.
What Each Optimization Option Removes
This optimizer works by rewriting the SVG markup as text, removing data that has no effect on how the image renders. The table below shows what each toggle targets and whether it is always applied or optional. The visual output stays identical after these transformations.
| Option | What it removes | Applied |
|---|---|---|
| XML declaration | The leading processing instruction | Always |
| Whitespace collapse | Spaces and newlines between tags, runs of multiple spaces, padding inside tags | Always |
| Remove comments | HTML and XML comment blocks that never reach the viewer | Optional |
| Remove metadata and editor data | metadata, title and desc elements, Inkscape and Sodipodi attributes, and dc, cc, rdf namespaces | Optional |
| Clean auto-generated IDs | Editor IDs such as id="path1234" on common shape and group elements | Optional |
| Remove empty groups and attributes | Empty g elements and attributes with empty values, including empty style attributes | Optional |
Which Settings Fit Your Use Case
Inkscape or Illustrator export
These editors add the most overhead. Enable remove metadata and editor data plus remove comments to strip Sodipodi, Inkscape, and document namespaces. This is where you see the largest reduction.
Inline SVG in a web page
When you paste SVG directly into HTML, turn on clean auto-generated IDs so duplicate IDs from multiple icons do not collide. Combine with whitespace collapse for the smallest inline footprint.
Icons for a component library
Use remove metadata, clean IDs, and remove empty groups to get lean, predictable markup before importing into React, Vue, or a sprite. Keep an original copy for re-editing later.
Animated or scripted SVG
Leave clean IDs off if your CSS, SMIL, or JavaScript references elements by ID. The tool never touches animation markup, but kept IDs ensure your selectors still match after optimizing.
Common Problems and Fixes
The file is rejected on selection
The tool only accepts files with an SVG MIME type or a .svg extension. If your graphic was saved as .txt or another extension, rename it to .svg and try again. Files exported as PNG or JPG cannot be optimized here.
The size reduction is small
Clean, hand-written SVGs have little to remove. Larger reductions come from editor exports full of metadata. Make sure remove metadata, remove comments, and clean auto-generated IDs are all enabled to capture every saving.
An animation or interaction stopped working
If CSS, SMIL, or scripts target elements by ID, turning on clean auto-generated IDs can remove the IDs they rely on. Re-run the optimization with that option off, then download again.
I need to re-edit the SVG later
Optimization strips editor data that Inkscape and Illustrator use to reconstruct shapes, layers, and guides. Always keep the original source file as a backup, since the minified output is meant for delivery, not further editing.