How to Compress SVG Files

Updated June 2026 · 4 min read

You exported an icon from Illustrator and got a 45 KB SVG file — for a 24×24 pixel icon. That's absurd. A well-optimized SVG of that icon should be under 1 KB. Here's why SVGs bloat and exactly how to shrink them.

SVG Is Code, Not Pixels

Unlike JPG or PNG, SVG files are XML text. Compression doesn't mean "reduce quality" — it means "clean up the code." The same visual result, just with less markup. This is fundamentally different from raster image compression and the reason most general "image compressors" can't optimize SVGs well.

Where SVG Bloat Comes From

• Editor metadata: Illustrator, Figma, and Inkscape all embed editor-specific data (artboard info, layer names, export timestamps) that browsers ignore. This alone can be 50-70% of the file.
• Unnecessary precision: Path coordinates like 12.4839274 instead of 12.5. Your eye can't see sub-pixel precision, but the file stores it.
• Embedded raster images: Some SVGs contain base64-encoded PNG/JPG data. That's not vector at that point — it's a raster image in a text wrapper.
• Unused definitions: Gradients, filters, and clip paths that aren't used anywhere in the file.
• Comments and whitespace: Human-readable formatting adds bytes browsers don't need.

How to Compress an SVG: 3 Levels

Level 1: Basic Cleanup (50-70% reduction, zero visual change)

Run the SVG through SVGOMG (SVGO's web GUI). Enable: remove editor data, remove comments, remove metadata, remove XML instructions, collapse useless groups. This is safe — the image looks identical, but the file is much smaller.

Level 2: Precision Reduction (additional 20-30%)

In SVGOMG, reduce decimal precision to 2 or 3 places. A coordinate of M12.4839274 45.1293847 becomes M12.48 45.13 — functionally identical at any screen size, but the string is half the length. For icons under 100px, precision of 1 is often enough.

Level 3: Path Simplification (use with caution)

Tools like SVGOMG's "merge paths" and "convert shape to path" can shrink files further but may change rendering slightly. Always diff the before/after visually. This is for when every byte counts (like inline SVGs in critical CSS).

GZip Makes It Even Smaller

SVGs are text, and text compresses extremely well with GZip (which every web server enables by default). A 10 KB SVG might transfer as 3 KB over the network. But you should still optimize the source — smaller source = smaller gzipped output.

What About PNG Instead of SVG?

For simple icons and logos, a compressed SVG will always be smaller than a PNG at any usable resolution — and it scales infinitely. The only time PNG beats SVG on file size is for highly complex images (photographs, detailed illustrations with thousands of paths). In those cases, converting SVG to a compressed PNG via Compress2PNG might actually produce a smaller file. Know when to use which.