SVGO: The Complete Guide

SVGO (SVG Optimizer) is the de-facto standard for SVG optimization. Nearly every other tool — SVGOMG, Vite SVG plugins, svg.dog, webpack loaders — uses SVGO under the hood. Understanding SVGO means understanding SVG optimization.

Installation

# Global install (for CLI use)
npm install -g svgo

# Project dev dependency (recommended for teams)
npm install --save-dev svgo

Basic CLI usage

# Optimize a single file
svgo icon.svg

# Optimize to a different output path
svgo icon.svg -o icon.min.svg

# Run multiple passes (squeezes out more)
svgo --multipass icon.svg

# Process all SVGs in a folder
svgo -f ./icons -o ./icons-min

# Recursively process subdirectories
svgo -r -f ./icons

The --multipass flag tells SVGO to re-run until no further optimizations are found. It typically saves another 2–5% at the cost of being slightly slower. Always use it in automated pipelines.

Configuration

SVGO reads configuration from svgo.config.js (or .json) in the working directory:

// svgo.config.js
export default {
  multipass: true,
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          // Never remove viewBox — needed for responsive scaling
          removeViewBox: false,

          // Keep IDs if you need them for CSS/JS targeting
          cleanupIds: false,

          // Don't inline styles — they may be referenced externally
          inlineStyles: false,
        },
      },
    },
  ],
};

The preset-default plugin bundles about 30 individual plugins. You can override individual plugin settings via overrides rather than disabling the entire preset.

Common plugins explained

removeViewBox

Default: disabled (it was enabled in older SVGO versions, which caused many complaints). Never remove the viewBox — it’s essential for responsive SVG scaling. If you’re inheriting an old config, make sure removeViewBox: false is set.

convertPathData

Optimizes path d attribute data: rounds coordinates, converts absolute to relative when shorter, removes redundant commands. Typically the single biggest savings contributor.

{
  name: 'preset-default',
  params: {
    overrides: {
      convertPathData: {
        floatPrecision: 1,  // 1 decimal place (default: 3)
      },
    },
  },
}

cleanupNumericValues

Rounds attribute values to the configured precision. stroke-width="2.00000"becomes stroke-width="2".

removeComments

Removes all XML comments. Almost always safe unless your SVG uses comments for runtime JavaScript parsing (unusual but possible).

removeMetadata

Removes <metadata> elements, which design tools use to store Dublin Core or RDF metadata about the file. Browsers never display this.

collapseGroups

Merges group elements (<g>) into their parent when the group has no attributes that do anything. Reduces nesting depth.

mergePaths

Combines adjacent <path> elements with identical attributes into one. Can produce significant savings in icon sets.

SVGO Node.js API

import { optimize } from 'svgo';

const svgString = '<svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>';

const result = optimize(svgString, {
  multipass: true,
  plugins: [
    {
      name: 'preset-default',
      params: { overrides: { removeViewBox: false } },
    },
  ],
});

console.log(result.data);        // optimized SVG string
console.log(result.info.width);  // parsed width (if available)

SVGO with a config file

Place svgo.config.js at the root of your project. SVGO auto-detects it when run from that directory. Use --config path/to/config.js to specify an alternate location:

svgo --config ./config/svgo.config.js -f ./icons

SVGO vs alternatives

SVGO is excellent but has trade-offs:

• It requires Node.js — not always available in every environment
• The default config needs tuning for specific use cases (especially removeViewBox)
• Version updates occasionally change output — pin to a specific version in production builds

For a zero-maintenance alternative that always uses the latest tuned SVGO config, the svg.dog API is a drop-in replacement. See why a hosted API makes sense for the trade-off analysis.

Common mistakes

• Forgetting --multipass — single-pass optimization leaves 10–20% on the table.
• Not verifying output — always spot-check optimized SVGs in a browser. Complex animations and filters occasionally break.
• Using an old SVGO version — SVGO 3.x has a very different plugin API from SVGO 1.x and 2.x. Make sure your config matches your version.
• Removing IDs needed by JavaScript — if your page usesdocument.querySelector('#myIcon path'), those IDs need to be preserved.

Getting the most from SVGO

Combine SVGO optimization with HTTP compression for maximum savings — see how to compress SVG. For icon sets, SVG minification covers the full picture.