Maximizing SVG Compression with SVGO Multipass

The Diminishing Returns of Single-Pass Optimization

When you run a standard SVG optimizer, you often see a significant drop in file size. However, SVG optimization is rarely a linear process. Because SVGO uses a plugin-based architecture, the order of operations matters. A plugin that simplifies a path might create a new opportunity for a plugin that removes redundant groups, but if the group-removal plugin already ran, that opportunity is missed until the next execution.

The multipass configuration solves this by iteratively running the optimization cycle. It continues to process the file until the output size stops shrinking, ensuring that interdependent plugins reach their maximum efficiency.

How Multipass Unlocks Deeper Compression

SVGO operates by passing the SVG through a series of plugins. Some plugins are "destructive" (removing metadata), while others are "transformative" (converting absolute coordinates to relative ones).

Consider a scenario where a convertPathData plugin simplifies a complex path. This simplification might result in a path that is now short enough to be represented by a simpler SVG element or might reveal that a surrounding <g> (group) tag is now redundant. In a single-pass run, the removeUselessGroup plugin may have already executed before the path was simplified. By enabling multipass, SVGO returns to the start of the plugin list, allowing the group-removal plugin to catch the new opportunity created by the path simplification.

Implementing Multipass in your Workflow

To implement this, you can use the SVGO CLI or a configuration file. For most production pipelines, a svgo.config.js file is preferred to ensure consistency across team environments.

Example Configuration

// svgo.config.js
module.exports = {
  multipass: true, // Enable iterative optimization
  plugins: [
    'preset-default',
    {
      name: 'removeViewBox',
      active: false, // Keep viewBox for responsive scaling
    },
    {
      name: 'convertPathData',
      params: {
        floatPrecision: 2, // Balance between size and visual fidelity
      },
    },
  ],
};

Running the Optimization

Run the following command in your terminal. Ensure you have svgo installed via npm (npm install -g svgo). Run this as a user with write permissions to the target directory:

# Optimize a single file and output to a new file
svgo input.svg -o output.svg --multipass

Expected Check: Compare the byte size of output.svg against input.svg. To verify the impact of multipass specifically, run the command once without the --multipass flag and once with it, then compare the two resulting files.

Trade-offs: Precision vs. Payload

While multipass yields the smallest possible file, it introduces risks regarding visual fidelity. The primary concern is floating-point rounding errors. Every time a path is transformed or simplified, the coordinates are recalculated. In an iterative loop, these small rounding differences can accumulate, occasionally leading to "gaps" between shapes or slightly shifted anchor points.

Additionally, be cautious with plugins that remove IDs. If your SVG is manipulated via CSS or JavaScript (e.g., animating a specific path by ID), the cleanupIDs plugin—which often runs more aggressively in multipass—may strip those identifiers, breaking your site's functionality.

Verifying the Result

Because optimization can introduce artifacts, never commit optimized SVGs without a visual regression check. The most practical verification method is a side-by-side browser comparison:

• Open the original SVG and the optimized SVG in two separate browser tabs (Chrome and Firefox are recommended).
• Zoom in to 400% on complex junctions or curves to check for rounding gaps.
• Verify that the SVG still scales correctly by checking that the viewBox attribute was preserved.

If you notice visual degradation, reduce the floatPrecision value in your config or disable the specific plugin causing the shift.