SVG optimizer
Paste SVG markup or drop an .svg file and a minified copy appears, with the two drawn side by side so you can check nothing changed. It runs SVGO in your browser.
How to use it#
- Paste SVG markup into the box above, or drop an .svg file onto it.
- Choose how many decimal places to keep, and tick keep IDs if CSS or a script refers to them.
- Compare the before and after pictures, and check the size saved.
- Copy the optimised markup, or download it as a .svg file.
Where the bytes in an SVG go#
An SVG saved from a design program carries a lot that no browser needs: an XML declaration, comments naming the program, editor metadata, groups nested inside groups, IDs on every layer, and coordinates written to eight decimal places. An icon that draws in a few hundred bytes often arrives as several kilobytes.
This runs SVGO, the optimiser most build tools use, with its standard set of passes. It removes the editor leftovers, merges and simplifies paths, shortens colours such as #ff0000 to red, collapses groups that do nothing, and rounds numbers. It repeats until a pass saves nothing more.
Decimal places, and when rounding shows#
Rounding is where most of the saving comes from, and it is the one change that can be seen. Three decimal places is the standard setting and is invisible for almost everything. Coordinates in an icon drawn on a 24 by 24 grid are good to a thousandth of a pixel at that setting.
Go lower for a large, simple illustration, where a whole number is often fine. Go higher when the SVG uses a tiny viewBox, such as 0 0 1 1, and is scaled up to display, because there a rounding error is multiplied by the scale. The before and after pictures show when you have gone too far: curves look lumpy and thin lines drift.
What it leaves alone#
The title element stays, because screen readers announce it, and so does the viewBox, because an SVG without one cannot scale. Scripts and event handlers are kept unless you tick remove scripts, so an interactive SVG keeps working.
IDs are shortened or removed when nothing inside the file refers to them. That breaks an SVG whose IDs are used from outside it, by the page stylesheet, a script, or a link to #part of it. Tick keep IDs for those. The rules in a style element then stay where they are instead of moving onto the shapes, since moving a rule is what removes the ID it pointed at.
Frequently asked questions#
How many decimal places should I keep?
#
Three for almost anything, which is the default. Two or fewer for large illustrations and simple logos, where the saving is worth having and the rounding cannot be seen. Four or five for an SVG with a very small viewBox that is scaled up to display, where small errors are magnified. Check the before and after pictures whenever you go down.
When should I keep IDs?
#
When something outside the SVG refers to parts of it by ID: a stylesheet on the page, a script, an animation, or a use element in another file pointing at #icon-name. Optimising shortens or removes IDs that nothing inside the file uses, which breaks those references. With keep IDs ticked, every ID stays as written.
Will the optimised SVG look different?
#
It should not. The changes are ones a browser draws the same way, apart from rounding, which at three decimal places is far below a pixel. The two pictures above the result are both drawn from real markup, the original and the optimised copy, so any difference would show there.
Is it safe to paste an SVG from somewhere I do not trust?
#
Yes. The SVG is parsed as data and only ever shown as an image, where scripts do not run. Remove scripts takes script elements and event handlers out of the optimised copy, which is worth doing before you put an SVG from an unknown source on your own site.
Is my SVG uploaded?
#
No. SVGO runs in this browser tab, in the background so the page stays responsive on a large file. Nothing you paste or drop is sent anywhere.