How to Make SVG Files Smaller
Bloated SVG files slow down websites. These techniques reduce SVG size by 30–80% without any visual quality loss.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Step 1: Run SVGO (Biggest Single Win)
SVGO is a Node.js tool that applies dozens of optimizations automatically. A single command typically reduces file size 30–70%.
- Install: npm install -g svgo
- Optimize: svgo input.svg -o output.svg
- Batch optimize: svgo -f ./icons/
- Online version: SVGOMG at jakearchibald.github.io/svgomg
- SVGO removes: comments, metadata, editor namespaces, empty groups, hidden elements
Step 2: Reduce Coordinate Precision
Design tools export coordinates to 6+ decimal places. SVG looks identical with 2 decimal places.
- SVGO handles this automatically with cleanupNumericValues
- Manual: find '123.456789' patterns and shorten to '123.46'
- viewBox coordinates often have unnecessary precision — round them
- Path 'd' attributes compress significantly with fewer decimals
Step 3: Remove Editor Metadata
Illustrator, Inkscape, and Figma add editor-specific XML namespaces (inkscape:, sodipodi:, dc:, rdf:) that browsers ignore. Removing them shaves off 20–40% from exported files.
- Save as 'Plain SVG' in Inkscape (not 'Inkscape SVG')
- In Illustrator: Export As SVG, uncheck 'Preserve Illustrator Editing Capabilities'
- In Figma: SVG export doesn't add extra metadata (already clean)
- SVGO removes most namespaces automatically
Step 4: Enable Gzip/Brotli on Your Server
SVG is XML text and compresses extremely well — typically 60–80% compression ratio. Enable server-level compression for SVG MIME type (image/svg+xml). Vercel, Netlify, and Cloudflare do this automatically.
Frequently Asked Questions
What's a good SVG file size for the web?
Under 5KB for simple icons (after SVGO + gzip). Under 20KB for complex logos. Under 100KB for detailed illustrations. These are guidelines — gzipped, actual transfer size is 60–80% smaller.
Does SVGO change how the SVG looks?
Default SVGO settings preserve visual output exactly. Some aggressive settings (like collapseGroups or removeDimensions) may affect layout. Always preview before deploying.
Can I compress SVG like a ZIP file?
Yes — .svgz is a gzip-compressed SVG. Servers can serve it transparently with the right Content-Encoding header. However, server-level gzip on .svg is simpler and more widely supported.
My SVG has a huge embedded base64 image — how do I reduce it?
Extract the embedded image to a separate file and reference it via <image href='photo.jpg'>. Or remove it if it's not essential. Base64-encoded images inside SVG can't be compressed further.
Should I use SVG sprites to reduce total page requests?
Yes. Combine all page icons into one SVG sprite file. Each icon is referenced with <use href='#icon-name'>. One request loads all icons, all cacheable. Reduces 10 icon requests to 1.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG