SVG Optimization: Reduce File Size by 80%

Why SVGs Need Optimization

SVG is the format of choice for icons, logos, illustrations, and UI elements on the web. It scales to any resolution, supports CSS styling, and weighs less than raster alternatives at most sizes. But the SVGs you export from Figma, Illustrator, or Sketch are not production-ready. They are bloated.

A typical icon exported from Figma at 24x24px might weigh 2-4 KB. After optimization, that same icon is 200-600 bytes. When you multiply that by 50 or 100 icons across a site, the difference is meaningful: tens of kilobytes saved on every page load.

Optimization is not just about file size. Cleaner SVG markup is easier to read, easier to style with CSS, easier to animate, and less likely to cause rendering issues across browsers.

What Bloats Your SVGs

Before you can optimize, you need to understand what you are removing. Design tools add a substantial amount of data that serves the editor but does nothing for the browser.

Common Sources of Bloat

Bloat Type	Example	Impact
Editor metadata	Illustrator's <!-- Generator: Adobe Illustrator -->, Figma IDs	50-500 bytes per file
Unnecessary attributes	xmlns:xlink, xml:space, data-name	100-300 bytes per file
Excessive precision	Coordinates like 12.000000001 instead of 12	20-40% of path data size
Redundant groups	Nested <g> elements with no attributes	50-200 bytes per file
Embedded styles	Full <style> blocks instead of attributes	100-1000+ bytes
Hidden elements	display="none", off-canvas elements, clip masks	Variable, can be large
Unoptimized paths	Absolute coordinates when relative would be shorter, full moveto commands	10-30% of path data size

Here is what a typical unoptimized SVG icon looks like compared to its optimized version.

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 28.0, SVG Export -->
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1"
     id="Layer_1"
     x="0px" y="0px"
     viewBox="0 0 24 24"
     style="enable-background:new 0 0 24 24;"
     xml:space="preserve">
  <style type="text/css">
    .st0{fill:none;stroke:#000000;stroke-width:2;
         stroke-linecap:round;stroke-linejoin:round;}
  </style>
  <g id="search-icon">
    <g>
      <circle class="st0" cx="11.000000" cy="11.000000"
              r="8.000000"/>
      <line class="st0" x1="21.000000" y1="21.000000"
            x2="16.650000" y2="16.650000"/>
    </g>
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
     viewBox="0 0 24 24" fill="none" stroke="currentColor"
     stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="11" cy="11" r="8"/>
  <path d="m21 21-4.35-4.35"/>
</svg>

Same visual result. 89% smaller. The optimized version also uses currentColor, making it stylable with CSS.

SVGO: The Essential Optimizer

SVGO (SVG Optimizer) is the standard tool for SVG optimization. It applies a configurable pipeline of plugins that strip unnecessary data, simplify paths, and clean up markup.

# Install globally
npm install -g svgo

# Optimize a single file
svgo input.svg -o output.svg

# Optimize all SVGs in a directory
svgo -f ./src/icons -o ./dist/icons

# Use without installing (npx)
npx svgo input.svg -o output.svg

# Show file size before and after
npx svgo input.svg -o output.svg --pretty --indent 2

Recommended SVGO Configuration

module.exports = {
  multipass: true,  // Run multiple passes for better optimization
  plugins: [
    // Preset default includes most useful optimizations
    {
      name: 'preset-default',
      params: {
        overrides: {
          // Keep viewBox (needed for responsive scaling)
          removeViewBox: false,

          // Keep IDs if you reference them (sprites, CSS)
          cleanupIds: {
            remove: false,
            minify: true,
          },

          // Round to 2 decimal places (good balance)
          cleanupNumericValues: {
            floatPrecision: 2,
          },

          // Convert absolute paths to relative (saves bytes)
          convertPathData: {
            floatPrecision: 2,
          },
        },
      },
    },

    // Remove width/height for fluid scaling (use viewBox instead)
    'removeDimensions',

    // Sort attributes for consistency and better gzip
    'sortAttrs',

    // Convert colors to shortest form (#fff vs #ffffff)
    {
      name: 'convertColors',
      params: {
        currentColor: true,  // Convert #000 to currentColor
      },
    },
  ],
};

You can also optimize SVGs right in the browser with QTool's SVG Optimizer — paste or upload any SVG file and get an optimized version instantly, no CLI required.

Manual Optimization Techniques

SVGO handles the automated cleanup, but some optimizations require human judgment. These manual techniques can yield additional savings beyond what automated tools achieve.

1. Simplify Paths

Complex paths with hundreds of anchor points can often be simplified to a fraction of their original point count without visible difference. In your vector editor, look for "Simplify Path" (Illustrator) or "Flatten" (Figma) options.

2. Use Basic Shapes Instead of Paths

<!-- Verbose: circle as a path (109 bytes) -->
<path d="M22,12A10,10,0,1,1,12,2,10,10,0,0,1,22,12Z"/>

<!-- Efficient: circle element (35 bytes) -->
<circle cx="12" cy="12" r="10"/>

<!-- Verbose: rectangle as a path (87 bytes) -->
<path d="M2,4H22V20H2Z"/>

<!-- Efficient: rect element (43 bytes) -->
<rect x="2" y="4" width="20" height="16"/>

3. Combine Similar Paths

Multiple paths that share the same fill and stroke attributes can often be combined into a single path element. This eliminates repeated attribute declarations.

4. Remove Hidden Layers and Off-Canvas Elements

Design files frequently contain hidden layers, guides, and elements positioned outside the viewBox. These add bytes without contributing to the visual output. Manually review and delete them before export.

5. Optimize Coordinate Precision

<!-- Before: 6 decimal places (74 bytes) -->
<path d="M12.482931,3.219847 L21.938472,14.726194 L3.027390,14.726194Z"/>

<!-- After: 1 decimal place (56 bytes) -->
<path d="M12.5,3.2 L21.9,14.7 L3,14.7Z"/>

<!-- Even shorter: integers where possible (46 bytes) -->
<path d="M12.5 3.2 21.9 14.7H3Z"/>

For most icons at 24x24 viewBox, one decimal place is more than sufficient. For large illustrations, two decimal places preserve quality while saving substantial bytes.

Inline SVG vs External Files

How you embed SVGs affects performance, cacheability, and styling capabilities. There is no single best approach — each method has trade-offs.

Method	Caching	CSS Styling	Best For
Inline SVG	No (part of HTML)	Full (fills, strokes, transforms)	Icons, logos, interactive elements
<img src>	Yes (browser cache)	None	Decorative images, complex illustrations
CSS background-image	Yes (CSS cache)	None	Background patterns, textures
<object>	Yes	Internal CSS only	Interactive SVGs with embedded scripts
SVG sprite + <use>	Yes (if external)	Partial (currentColor)	Icon systems with many repeated icons

<!-- Icon inherits color from parent via currentColor -->
<button class="btn-primary">
  <svg width="20" height="20" viewBox="0 0 24 24"
       fill="none" stroke="currentColor" stroke-width="2">
    <path d="M5 12h14M12 5l7 7-7 7"/>
  </svg>
  Continue
</button>

<style>
.btn-primary { color: #00d4ff; }
.btn-primary:hover { color: #818cf8; }
/* The SVG stroke color changes automatically */
</style>

SVG Sprite Sheets

When you use many icons across your site, an SVG sprite sheet consolidates all icons into a single file. Each icon is defined once and referenced with the <use> element.

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-search" viewBox="0 0 24 24">
    <circle cx="11" cy="11" r="8" fill="none"
            stroke="currentColor" stroke-width="2"/>
    <path d="m21 21-4.35-4.35" fill="none"
          stroke="currentColor" stroke-width="2"/>
  </symbol>

  <symbol id="icon-menu" viewBox="0 0 24 24">
    <path d="M3 12h18M3 6h18M3 18h18" fill="none"
          stroke="currentColor" stroke-width="2"/>
  </symbol>

  <symbol id="icon-close" viewBox="0 0 24 24">
    <path d="M18 6 6 18M6 6l12 12" fill="none"
          stroke="currentColor" stroke-width="2"/>
  </symbol>
</svg>

<!-- Reference icons from the sprite -->
<svg width="24" height="24">
  <use href="icons.svg#icon-search"/>
</svg>

<svg width="24" height="24">
  <use href="icons.svg#icon-menu"/>
</svg>

<!-- Or inline the sprite in the HTML and reference locally -->
<svg width="24" height="24">
  <use href="#icon-close"/>
</svg>

Styling SVGs with CSS

One of SVG's biggest advantages over raster formats is CSS styling. You can change colors, add hover effects, animate elements, and apply responsive sizing — all without touching the SVG file.

/* Inherit text color for mono icons */
.icon {
  width: 1.25em;
  height: 1.25em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em;  /* Align with text baseline */
}

/* Hover effect */
.btn:hover .icon {
  stroke: var(--primary-hover);
  transform: translateX(2px);
  transition: stroke 0.2s, transform 0.2s;
}

/* Dark/light mode with CSS custom properties */
:root {
  --icon-primary: #1a1a2e;
  --icon-secondary: #6b6b8a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --icon-primary: #e2e8f0;
    --icon-secondary: #94a3b8;
  }
}

.icon-brand { fill: var(--icon-primary); }
.icon-muted { stroke: var(--icon-secondary); }

Use QTool's SVG to CSS converter to turn SVG files into CSS background-image data URIs, and the SVG Editor to make quick visual adjustments without opening a full design tool.

Animation Performance

SVG animations can be smooth and lightweight, or they can destroy your frame rate. The difference comes down to what you animate and how you animate it.

The Performance Hierarchy

Approach	Performance	When to Use
CSS transform + opacity	Excellent (GPU-accelerated)	Hover effects, transitions, simple animations
CSS animation	Good	Loading spinners, looping animations, keyframed sequences
SMIL (<animate>)	Good (declarative)	Path morphing, self-contained animations inside SVG files
JavaScript + rAF	Variable	Complex interactive animations, data-driven transitions
Animating d, points, fill	Poor (triggers repaint)	Avoid if possible, or limit to few elements

/* GPU-accelerated: only transform and opacity */
.icon-loading {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Smooth hover with will-change hint */
.animated-icon {
  transition: transform 0.3s ease, opacity 0.3s ease;
  will-change: transform;  /* Use sparingly */
}
.animated-icon:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

/* Draw-on effect using stroke-dasharray */
.draw-path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw 1.5s ease forwards;
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

SVG Accessibility

SVGs need accessibility treatment just like images. The approach depends on whether the SVG is informative or decorative.

<!-- Informative inline SVG: use title + aria-labelledby -->
<svg role="img" aria-labelledby="chart-title chart-desc"
     viewBox="0 0 400 200">
  <title id="chart-title">Monthly Revenue</title>
  <desc id="chart-desc">
    Bar chart showing revenue growing from $12K in January
    to $34K in June 2026.
  </desc>
  <!-- Chart elements -->
</svg>

<!-- Decorative inline SVG: hide from screen readers -->
<svg aria-hidden="true" focusable="false" width="24" height="24">
  <!-- Decorative icon -->
</svg>

<!-- SVG in img tag: use alt attribute -->
<img src="diagram.svg" alt="Architecture diagram showing three
     microservices connected through an API gateway">

<!-- Decorative SVG in img tag -->
<img src="decoration.svg" alt="">

Run your SVG-heavy pages through QTool's Accessibility Checker to catch missing labels and roles on SVG elements.

Build Tool Integration

Automate SVG optimization in your build pipeline so every SVG that ships to production is optimized, regardless of who exported it from the design tool.

// vite.config.js
import { defineConfig } from 'vite';
import svgo from 'vite-plugin-svgo';

export default defineConfig({
  plugins: [
    svgo({
      multipass: true,
      plugins: [
        {
          name: 'preset-default',
          params: {
            overrides: {
              removeViewBox: false,
            },
          },
        },
        'removeDimensions',
        'sortAttrs',
      ],
    }),
  ],
});

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: '@svgr/webpack',  // Import SVGs as React components
            options: {
              svgo: true,
              svgoConfig: {
                plugins: [
                  { name: 'removeViewBox', active: false },
                  'removeDimensions',
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

# GitHub Actions: optimize SVGs on push
name: Optimize SVGs
on:
  push:
    paths: ['**/*.svg']

jobs:
  optimize:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npx svgo -r -f ./src/assets/icons
      - run: |
          git config user.name "SVG Bot"
          git config user.email "bot@example.com"
          git add -A
          git diff --cached --quiet || git commit -m "chore: optimize SVGs"
          git push

SVG Tools

QTool provides free browser-based SVG tools that require no installation or signup.

---