SVG Optimization: Reduce File Size Without Losing Quality

What Makes SVGs Large

SVGs exported from design tools contain significant overhead that browsers don't need:

Editor metadata: Adobe Illustrator stores fonts, history, and layer data in <?xml ...?> headers and <metadata> elements.
Inkscape attributes: sodipodi: and inkscape: namespaced attributes used only by Inkscape.
Unnecessary precision: coordinates like 123.45678901 instead of 123.46.
Suboptimal path data: absolute coordinates when relative are shorter, redundant commands, non-simplified paths.
Unused definitions: <defs> elements with gradients or patterns that aren't referenced.

SVGO — The Standard Optimizer

# CLI
npm install -g svgo
svgo input.svg -o output.svg
svgo input.svg --multipass  # multiple passes for better compression

# With config
svgo input.svg --config svgo.config.mjs

# svgo.config.mjs
export default {
  multipass: true,
  plugins: [
    { name: "removeViewBox", active: false },  // keep viewBox for responsive SVGs
    { name: "removeDimensions", active: true }, // remove width/height (use viewBox)
    { name: "sortAttrs", active: true },
    "preset-default",
  ],
};

What SVGO Removes

XML declaration (<?xml version="1.0"?>)
Comments and metadata
Editor-specific namespaces (Inkscape, Illustrator)
Hidden elements
Default attribute values
Empty groups and containers
Duplicate IDs

SVGO also simplifies path data: converts absolute to relative coordinates where shorter, rounds coordinates to 3 decimal places, and collapses redundant transformations.

Inlining SVG in HTML

<!-- External file: requires HTTP request, cacheable -->
<img src="icon.svg" alt="Settings" width="24" height="24">

<!-- Inline: no HTTP request, CSS-styleable, can animate -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="24" height="24">
  <path d="M12 2L2 7l10 5 10-5-10-5z"/>
</svg>

<!-- Inline SVG can be styled with CSS -->
<style>
  svg { color: var(--color-icon); }
  svg:hover { color: var(--color-icon-hover); }
</style>

Use currentColor for the stroke or fill to inherit the CSS color property — this lets you control SVG icon color with a single CSS property.

SVG as CSS Background (Data URI)

/* Convert SVG to data URI for use in CSS */
.icon-settings {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z'/%3E%3C/svg%3E");
  background-size: contain;
}

/* Note: in data URIs, encode # as %23, spaces as %20
   Single quotes are generally safer than double quotes inside the URI */

SVG Sprite for Icon Systems

<!-- Hidden sprite sheet -->
<svg style="display: none" xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon-settings" viewBox="0 0 24 24">
    <path d="..."/>
  </symbol>
  <symbol id="icon-close" viewBox="0 0 24 24">
    <path d="..."/>
  </symbol>
</svg>

<!-- Usage anywhere on the page -->
<svg width="24" height="24">
  <use href="#icon-settings"/>
</svg>

Optimize SVGs Instantly

Use ToolsVito's SVG Optimizer to minify SVG files in your browser — see before/after size and preview the result before downloading.