SVG Optimizer
Shrink SVG markup with the real SVGO optimizer — strip comments, editor metadata and XML boilerplate, drop redundant/default attribute values, round coordinate precision, minify path data, shorten hex colors, and remove unreferenced IDs. Shows original vs. optimized size and the reduction percentage.
Input
The file is optimized in your browser — it is never uploaded to a server.
Optimization Preset
Output
The optimized SVG will render here.
| Property | Value |
|---|---|
| No data yet | |
Guides
Paste SVG markup and get a smaller, cleaner version back — powered by SVGO, the same optimizer used by icon libraries, build tools and asset pipelines across the web. It strips comments, editor metadata (Inkscape, Illustrator, Sketch, Figma), the XML declaration and doctype, shortens hex colors (#ffffff → #fff), rounds coordinate precision, minifies path data, and removes element IDs that are proven unused within the document — all while keeping the SVG visually identical.
How to use it
- Paste your SVG source, or upload an
.svgfile. - Pick a preset — Light (safe cleanup only: comments, metadata, empty containers), Moderate (adds path minification, default-attribute removal and coordinate rounding), or Aggressive (also removes hidden elements, collapses groups, and converts inline styles to attributes) — or choose Custom to toggle each optimization individually.
- The optimized SVG, a live preview, and a size comparison (original vs. optimized bytes, percentage saved) appear instantly.
- Copy the result or download it as
optimized.svg.
Why not just minify the text?
A naive whitespace-and-comment stripper is safe but leaves most of the savings on the table — real bloat in exported SVGs is redundant attributes (fill-opacity="1", stroke-width="1"), six-decimal coordinates nobody's eye can distinguish from three, editor-only metadata (Inkscape grid settings, Illustrator namespaces, RDF/Dublin Core blocks), and unreferenced IDs left over from a design tool. This tool runs the real SVGO optimizer against your markup, so every transformation is one that ships in production icon sets — not a hand-rolled regex guessing at SVG structure.
Will optimizing break how my SVG looks?
No. Every optimization here is a semantics-preserving transform: colors are converted to an exactly equivalent shorter notation, coordinates are rounded within a precision you control, and structural changes (like hoisting a shared fill attribute up to a parent group) never change what's rendered, only how it's expressed. The preview panel shows the optimized result rendering live so you can confirm it yourself.
Is it safe to remove IDs? What if my CSS or JavaScript references one?
The Remove unreferenced IDs option only strips or shortens an ID after confirming nothing else inside the same SVG document references it (url(#id), href="#id", <use>, and similar). It has no way to know about an external stylesheet or script that targets an ID by name from outside the file — if that's your case, turn this option off, or use the Custom preset to disable just that toggle while keeping the rest.
Is my SVG uploaded anywhere?
No. Optimization runs entirely in your browser (or in memory, if called via the API) — nothing is stored or logged.
What's the difference between the presets?
Light only removes things with zero risk of altering appearance (comments, editor metadata, empty groups). Moderate adds real byte-shaving transforms (path minification, default-attribute stripping, coordinate rounding) that are still visually lossless. Aggressive additionally removes elements explicitly marked hidden (display:none, visibility:hidden) and restructures groups and styles more assertively — pick Custom if you want that level of control over each toggle individually.