Optimise and minify SVG files with SVGO
SVG files exported from design tools are full of things browsers never use: editor metadata, comments, hidden layers, default attribute values and coordinates with six decimal places. This SVG compressor runs SVGO — the widely used open-source SVG optimiser (MIT licence) — directly in your browser to strip that overhead — files exported from design tools often shrink by half or more.
Unlike a blind minifier, it shows what changed. You get the original and optimised code side by side, both renderings next to each other, an automatic pixel comparison that tells you whether the result still looks the same, and the gzip size that a web server would actually send. Your files are never uploaded.
How to use the SVG Compressor
- Drop one or more .svg files on the upload area, or paste SVG code and press Optimise pasted code.
- Keep the Safe preset for SVGs used with CSS, scripts or sprites, or choose Aggressive for standalone icons.
- Fine-tune decimal precision and the clean-up options; changing any option switches the preset to Custom.
- Check the badge — “Renders identically” means the optimised SVG draws the same pixels — and compare the code.
- Copy the optimised code, download a single file, or use Download all for a ZIP of every SVG.
SVG Compressor features
SVGO in the browser
The same optimisation engine used in many build pipelines, loaded on demand and run locally — no command line or Node.js needed.
Safe and aggressive presets
Safe never touches IDs, titles or the viewBox; Aggressive shortens IDs, removes titles and rounds harder for the smallest files.
Automatic visual check
Both versions are rendered and compared pixel by pixel, so you know at once if an option changed how the graphic looks.
Gzip size estimate
Shows the compressed transfer size before and after, measured with your browser’s built-in gzip compressor.
Before/after code
Side-by-side code views make it easy to see exactly what was removed, and to copy the result straight into HTML or a component.
Batch and ZIP
Optimise a whole icon set at once; each file is saved with a .min.svg name.
What gets removed or rewritten
- Editor data — Inkscape, Sodipodi, Illustrator and Sketch namespaces,
<metadata>blocks, XML declarations and DOCTYPEs. - Comments — except comments starting with
<!--!, the convention for licence notices, which are kept. - Numbers — coordinates are rounded to the precision you choose, and path data is rewritten with shorter relative commands.
- Redundant markup — empty groups, default attribute values, unused namespaces, hidden elements and styles that can be written as shorter attributes.
- Colours —
#ff0000becomesred,#0000ffbecomes#00f.
Which options can break an SVG
Every option is safe for a plain icon shown with an <img> tag. These are the ones to think about when an SVG is inlined, styled or scripted:
| Option | What can go wrong | In Safe preset |
|---|---|---|
| Removing the viewBox | The graphic no longer scales with CSS width and height | Kept |
| Remove unused & shorten IDs | CSS selectors, JavaScript, <use href="#id"> sprites and links to IDs stop matching | Off |
| Remove title & description | Screen readers lose the accessible name of the graphic | Off |
| Precision 0–1 | Small icons (for example 24×24) can look distorted | 3 decimals |
| Remove width & height | Without CSS sizing the image may show at a default size | Off |
| SVG 2 syntax | Very old software that only understands xlink:href | Off |
Why the gzip size matters
Web servers usually compress SVG with gzip or Brotli before sending it, and SVG text compresses very well, so the size that travels over the network is often a fraction of the file size. Optimising still helps: shorter numbers and fewer elements mean less to compress and less for the browser to parse. The gzip figure shows the real transfer size before and after.
If you need a bitmap version for a platform that does not accept SVG, convert the optimised file with SVG to PNG and shrink it further with the PNG compressor.
SVG Compressor FAQ
Is SVG compression lossless?
With the Safe preset it is lossless in practice: the SVG compressor removes data that does not affect rendering and rounds coordinates to 3 decimals, which is well below a pixel for typical icons and illustrations. The built-in pixel comparison confirms whether the result renders identically.
Will optimising break my SVG animations or CSS?
The Safe preset keeps IDs, the viewBox and titles, so CSS, JavaScript and sprite references keep working. Shortening IDs or removing the viewBox can break them, which is why those options are off by default.
What is SVGO?
SVGO (SVG Optimizer) is a free, open-source tool released under the MIT licence that applies a set of plugins to clean up and minify SVG code. This page runs version 3.3.2 in your browser.
How do I minify an SVG for inline HTML or React?
Paste the code, choose Aggressive if the SVG is not styled by ID, and copy the optimised code. Keep the viewBox so it scales with CSS.
Why is my SVG not getting smaller?
It may already be optimised, in which case the original is kept. SVGs that embed bitmap images (base64 PNG or JPG data) are mostly image data, which SVGO cannot shrink.
Are my SVG files uploaded?
No. The optimiser runs entirely in your browser, so your graphics stay on your device.