SVG Optimization: Making Your Icons and Illustrations Faster

SVG is the best format for icons, logos, and illustrations on the web — it's resolution-independent, scriptable, and often tiny. But SVGs exported from design tools like Figma, Illustrator, or Inkscape are bloated with unnecessary data. This guide shows you how to optimize them.

Why SVGs Get Bloated

When you export an SVG from a design tool, it includes metadata the browser never uses:

• Editor version and creation timestamps
• Invisible layers and hidden elements
• Default attribute values (fill="black" is redundant if it's already the default)
• Excessive decimal precision (47.382910 instead of 47.4)
• Inline styles that could be attributes
• Empty groups and defs sections

A logo exported from Figma might be 8KB. After optimization, the same logo is 1.2KB — an 85% reduction.

Quick Optimization with SVGO

SVGO (SVG Optimizer) is the industry-standard tool. Install it globally or use it via an online tool:

npm install -g svgo
svgo input.svg -o output.svg

# Optimize all SVGs in a folder
svgo -f ./src/assets/icons

You can also use HeoLab's SVG Optimizer directly in your browser — no installation needed.

What SVGO Removes

SVG Best Practices

1. Use viewBox, not width/height

<!-- Bad: fixed size -->
<svg width="24" height="24">

<!-- Good: responsive -->
<svg viewBox="0 0 24 24">

The viewBox makes SVGs scale correctly with CSS. You can set size via CSS without touching the SVG file.

2. Use currentColor for theme support

<svg viewBox="0 0 24 24" fill="currentColor">
  <path d="..."/>
</svg>

Now the icon inherits the parent element's color property — perfect for dark mode.

3. Inline vs. External SVG

For icons used across many pages, an SVG sprite with <use> gives you the best of both worlds.

4. Avoid SVG fonts

SVG fonts are deprecated. Use WOFF2 or system fonts instead.

5. Compress SVGs with gzip/brotli

SVG is XML text — it compresses extremely well. Make sure your server sends Content-Encoding: gzip or Content-Encoding: br. A 3KB SVG often becomes 800 bytes over the wire.

Optimizing in CI/CD

Add SVG optimization to your build pipeline so developers don't need to think about it:

// package.json
{
  "scripts": {
    "optimize-svg": "svgo -f src/assets/icons",
    "build": "npm run optimize-svg && next build"
  }
}

Measuring the Impact

Use Chrome DevTools Network tab to compare before/after. For a page with 20 icons, switching from un-optimized to optimized SVGs can save 50–100KB — a meaningful improvement for initial load.

Summary

• Always optimize SVGs before shipping — they're rarely production-ready from design tools
• Use SVGO (CLI) or an online tool like HeoLab's SVG Optimizer
• Use viewBox + currentColor for flexible, themeable icons
• Serve SVGs with gzip/brotli compression
• Automate optimization in your build pipeline