How to optimize an SVG
- Add your SVG. Drag an
.svgfile onto the box, click to browse, or paste the raw markup into the text area. - Pick a level. Aggressive runs SVGO's full default preset for the smallest file. Safe skips a few plugins that can occasionally affect unusual SVGs, such as ones with IDs referenced from outside the file.
- Optimize. Click Optimize SVG to run it through SVGO. The original and optimized file size, plus the percentage saved, show up right away.
- Compare and download. Check the side-by-side preview to confirm the artwork still looks right, then click Download optimized SVG.
Why hand-exported SVGs are bloated
An SVG saved straight out of Illustrator, Figma, Inkscape or Sketch is a working file first and a web asset second. It usually carries a lot of weight that a browser never needs to draw the picture: XML comments left by the editor, an <?xml?> declaration and doctype, a <metadata> block describing the export settings, unused <defs> and gradients, empty groups, editor-specific namespaces like inkscape: or sodipodi: attributes, and coordinates written out to nine or ten decimal places when three would be visually identical. None of it changes what gets drawn on screen, it just adds bytes. On an icon set or a logo used across hundreds of pages, that bloat adds up fast.
This tool runs the actual SVGO library in your browser, the real, industry-standard SVG optimizer that also powers the well-known SVGOMG web app, not a hand-rolled regex cleanup. SVGO works through a set of well-tested plugins that each handle one kind of cleanup, from stripping comments and metadata to merging redundant groups and rounding numeric precision. Because SVG is XML, a naive find-and-replace cleaner can quietly corrupt a file; SVGO instead parses the SVG into a proper document tree, applies its optimizations to that tree, and writes valid markup back out, which is why it is the tool real design and engineering teams reach for.
The Aggressive level here is SVGO's own default preset, unmodified. The Safelevel turns off a small number of plugins that carry a documented, if uncommon, risk of changing behavior in unusual files, for example an SVG whose element IDs are targeted by CSS or JavaScript outside the file, or one with elements deliberately hidden until an animation reveals them. For a typical logo, icon or illustration exported from a design tool, Aggressive is the better default and the one most people should reach for first.
Frequently asked questions
Will this change how my SVG looks?
In nearly all cases, no. SVGO only removes or rewrites things that do not affect rendering, such as comments, editor metadata, unused definitions and excess decimal precision. A small number of shapes get rewritten as an equivalent path, which looks identical but is technically a different element. Always check the before/after preview here, and use the Safe level if your SVG has IDs referenced from outside the file or elements hidden on purpose for animation.
Is my file uploaded anywhere?
No. The optimization runs entirely inside your browser tab using the SVGO engine loaded locally. Your SVG is never sent to a server.
What is the difference between Safe and Aggressive?
Aggressive runs SVGO's full default preset for the smallest possible file. Safe turns off a few plugins that can, in unusual SVGs, touch an ID referenced from outside the file or a deliberately hidden element. Both run the same real SVGO engine.
Why is my SVG already small after export?
Some tools, and hand-written SVG, already skip most of the bloat, so there is less to strip. You will usually see the biggest savings on files exported from Illustrator, Figma or Inkscape with default settings.
Related: convert SVG to PNG or JPG.