SVGs that come out of Illustrator, Figma or Inkscape drag along a lot the browser does not need: editor comments, metadata blocks, proprietary attributes, generated identifiers and coordinates with twelve decimal places.
This page runs SVGO over them with the default preset plus a few switches worth exposing. On icons exported from a design tool it routinely cuts 40 to 70 % of the weight without changing a pixel of the drawing.
How to use it
- Drag in the SVGs, as many as you like.
- Adjust the path decimals if you need more or less precision.
- Process and check how far each one dropped before downloading.
Frequently asked questions
- How many decimals should I keep in paths?
- Three is fine for almost everything. With small icons you can go to one or two and save more still; if the drawing has long smooth curves, going too low can make visible corners appear.
- Why is there an option to drop width and height?
- Because an icon that should scale with CSS is better off with only a viewBox: with no fixed size it takes whatever the container gives it. If you are inlining the SVG on its own, keep them.
- What does the id prefix do?
- It puts the file name in front. If you put several SVGs on one page and each has a gradient called "a", they collide; with the prefix each keeps its own.