SVG optimizer
Minify and clean up SVG markup with SVGO — strip metadata, collapse paths and shrink the file. Runs in your browser.
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><rect width="48" height="48" fill="#6b46ff" rx="10"/><circle cx="24" cy="24" r="6" fill="#fff"/></svg>
What this SVG optimizer does
Paste SVG markup and the tool runs it through SVGO — the same optimizer used by webpack, Vite, Next.js and most build pipelines — right in your browser. It strips editor metadata and comments, rounds coordinates, converts shapes to shorter path commands, removes default attributes and collapses groups, then shows the before/after byte count, a rendered preview and the optimized code with a copy button. The preview is loaded as an image data URL so any script inside a pasted SVG cannot run on the page.
How to use it
- Paste the SVG source into the SVG source box (replace the sample).
- Leave Multipass on for the smallest output, or turn it off for speed.
- Tick Prettify output if you want readable, indented markup.
- Check the size badge and the preview, then click Copy on the Optimized panel.
Optimization runs on every keystroke, so you can edit the source and watch the size change.
What the default preset actually does
SVGO’s preset-default is a chain of about 30 plugins. The ones responsible for
most of the savings:
| Plugin | Effect |
|---|---|
removeDoctype, removeXMLProcInst, removeComments, removeMetadata | drops the XML prolog, <!-- --> comments and Illustrator/Inkscape metadata blocks |
removeEditorsNSData | removes sodipodi:, inkscape:, sketch: namespaced attributes |
cleanupIds | shortens ids to a, b, c and removes unreferenced ones |
convertColors | rgb(0,0,0) → #000, #ffffff → #fff, named colors where shorter |
convertPathData | rounds coordinates to 3 decimals, converts absolute to relative commands, merges segments |
convertShapeToPath | turns simple rects, lines and polygons into paths when that is shorter |
collapseGroups, moveGroupAttrsToElems | flattens pointless g wrappers and pushes their attributes down |
removeUselessStrokeAndFill, removeUnknownsAndDefaults | deletes attributes already equal to the default (fill="black", stroke-width="1") |
mergePaths | joins adjacent paths with identical styling into one d attribute |
minifyStyles, inlineStyles | minifies style blocks and inlines single-use rules as attributes |
sortAttrs, removeEmptyContainers, removeEmptyAttrs | tidy-ups that gzip better |
Since SVGO 4, removeViewBox is no longer in the default preset, so responsive
scaling keeps working. This tool runs the preset as-is; there is no per-plugin
toggle UI.
Typical savings
| Source | Before | After | Saved |
|---|---|---|---|
| Figma icon export (24px) | 1.1 KB | 420 B | 62% |
| Illustrator logo with metadata | 38 KB | 9 KB | 76% |
| Hand-written icon | 310 B | 280 B | 10% |
| Complex map or chart with 2,000 paths | 1.4 MB | 900 KB | 35% |
Design tools are the usual culprits: a 24px icon from Figma or Sketch carries an
XML prolog, a comment with the generator name, fill-rule/clip-rule on every
path and ids like Path-Copy-14. Hand-written SVGs have little to lose.
Gotchas before you ship
- Ids used by CSS or JS.
cleanupIdsrenames them. If you animate#wheelfrom JavaScript, add anidyou reference, then check it survived. Classes are kept, so prefer classes for hooks. - Inline
stylevs attributes.inlineStylesmay convert astyleblock into presentation attributes. Presentation attributes have lower specificity than any CSS rule, which can change how your page stylesheet overrides the icon — usually an improvement, but worth a glance. currentColoricons. Replace hard-coded fills withfill="currentColor"before optimizing so the icon inherits the text color; SVGO keeps it.- Text elements. Fonts are not embedded; convert text to outlines in the design tool if the font is not available on the web page.
- Sprites and
use. Symbols referenced byusekeep their ids because they are referenced; unreferenced symbols are not removed unless empty.
After optimizing, you can inline the SVG in HTML, reference it from an img, or
embed it in CSS as a data URL — the Image to Base64
tool handles the last step.
Related tools and snippets
- Image compressor — for raster artwork (PNG, JPEG) rather than vectors.
- Image to Base64 — turn the optimized SVG into a data URL for CSS backgrounds.
- Favicon generator — rasterize an SVG logo into PNG favicons.
- Color converter — look up the short hex form SVGO will produce for a given color.
- Gradient text snippet — a CSS alternative to SVG gradient fills for headings.
FAQ
Is it safe to optimize my SVG?
For icons and illustrations, yes — the output renders identically. If you target elements by id or class from CSS or JavaScript, check them afterwards: SVGO's default preset removes unused ids and can merge or inline styles.
Does it upload my file?
No. The tool runs SVGO's browser build (version 4) directly in the page; the markup never leaves your tab.
Will it remove the viewBox?
No. SVGO 4's default preset keeps the viewBox, which you need for an SVG to scale responsively. Only width and height attributes that merely restate the viewBox are left alone too.
What does Multipass do?
It reruns the plugin chain until the output stops shrinking. One plugin's cleanup often unlocks another's (for example merging paths after converting shapes), so multipass typically saves a few extra percent at the cost of a little more time.
What does Prettify output do?
It indents the optimized markup with two spaces and one element per line instead of a single minified line. Use it when you want to read or commit the SVG; leave it off for the smallest file.
Why did the size go up?
This happens with already-minified SVGs when Prettify is on — indentation adds bytes. It can also happen if the input relies on a stylesheet SVGO converts into inline attributes on many elements. Turn Prettify off and compare again.