Compress SVG
An SVG exported from Figma, Illustrator or Sketch typically carries 2-5x more markup than it needs: editor namespaces, comments, empty groups, redundant transforms and 6-decimal coordinates. This tool runs your SVG through an SVGO-style pass, stripping the noise while keeping the rendered output pixel-identical.
How to compress an SVG
-
1
Paste or upload your SVG
Accepts raw XML text or a .svg file.
-
2
Pick an optimisation level
Safe (remove comments and editor metadata), aggressive (collapse groups, round coords, merge paths), or custom.
-
3
Review the diff
Compare byte count before and after, and preview the rendered result to confirm nothing changed visually.
-
4
Copy or download
Paste the optimised SVG directly into your code, or save as a file.
What bloats an SVG
Open a Figma-exported SVG in a text editor and you will typically see:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."
xmlns:sketch="..." width="24.000000" height="24.000000"
viewBox="0 0 24.000000 24.000000" ...>
<!-- Generator: Figma ... -->
<title>icon</title>
<desc>Created with Figma</desc>
<g id="Page-1" stroke="none" fill="none" fill-rule="evenodd">
<g id="icon" transform="translate(0.000000, 0.000000)">
<path d="M12.000000,2.000000 L..." fill="#000000"/>
</g>
</g>
</svg>
Almost every line is removable. The rendered output only needs the svg, viewBox, and path.
What the optimiser removes
| Removed | Why safe |
|---|---|
| XML comments | Never rendered |
| Editor namespaces (sketch, figma) | Not used by browsers |
<title> / <desc> (optional) |
Accessible text, keep if meaningful |
Empty <g> groups |
No visual effect |
| Default attribute values | Browsers use defaults anyway |
| Identity transforms | translate(0,0) does nothing |
| Coordinate decimals | 3 decimals look identical on screen |
| Unused IDs | Only keep IDs referenced elsewhere |
Gotchas
- Do not remove IDs referenced by CSS or by
url(#...)in fills, masks, filters. Aggressive mode can break gradients. - Keep
viewBox. Without it, the SVG will not scale responsively. - Keep
<title>if you rely on it for accessibility (screen readers announce it). - Avoid collapsing
<use>instances. The optimiser may inline them and lose the source-of-truth pattern.
When compression saves real bytes
SVG is text, which means gzip on the server already removes a lot of the redundancy. An SVG that drops from 4KB to 1KB uncompressed might only drop from 1.2KB to 0.7KB over the wire. Still worth it, and the smaller source is easier to read.
Frequently Asked Questions
Safe mode will not. Aggressive mode can remove IDs referenced by CSS or SMIL animations, if your SVG has animations, use safe mode or manually whitelist the IDs.
Figma/Illustrator exports typically shrink 50-80%. Hand-written SVG is already compact and usually only drops 10-20%.
By default yes, <title>, <desc> and aria-* attributes are preserved. You can opt to strip them if the SVG is purely decorative and the surrounding HTML provides the label.
Yes. The xmlns attribute is kept because it is required when pasting SVG directly into HTML. Inline SVG is usually the fastest delivery method for small icons.
Related Tools
Image Resizer
Resize images to pixel-exact dimensions or percentages while preserving aspect ratio. Batch-friendly, no upload.
QR Code Generator
Generate a browser-local QR code from a plain text or URL payload. Adjust size, colours and error correction, then download PNG.
Meme Generator
Add fixed top and bottom captions to a JPG, PNG, or WebP image in your browser. Set font, size, colors, and stroke, then download a PNG.
Barcode Generator
Create a 1D barcode in your browser in Code 128, EAN, UPC, ITF-14 and other supported formats. Download the rendered result as SVG or PNG.
GIF Maker
Turn a sequence of images into an animated GIF. Set frame rate, quality and dimensions before exporting.
Material Design Color Picker
Browse the Material Design color palette. Copy any shade (50 through A700) as HEX, RGB or HSL with one tap.