Using SVGO’s Multipass Mode to Shrink SVG Assets Safely

Problem: Bloated SVG files slow down pages

When designers export SVGs from tools like Illustrator or Sketch, the resulting files often contain metadata, hidden layers, unused groups, and duplicate IDs. These extra bytes add up, especially on mobile networks, and can delay the first paint of a page.

How SVGO’s multipass works

SVGO optimizes SVG by running a pipeline of plugins (e.g., removing useless attributes, collapsing groups, rewriting IDs). In a single pass, some opportunities are missed because later plugins cannot act on changes made by earlier ones. The --multipass flag tells SVGO to repeat the pipeline until a full pass yields no further size reduction. This allows, for example, a plugin that removes unused <defs> to run after an ID‑rewriting plugin has cleared references to those definitions.

Worked example: optimizing an icon set

Assume you have an icon SVG exported from a design tool.

1. Open a terminal in the folder that contains the SVG.
2. Ensure you have SVGO installed (locally via npm install svgo or globally).
3. Run the multipass command:

svgo --multipass source-icon.svg -o optimized-icon.svg

You need read permission on source-icon.svg and write permission on the output directory.

After the command finishes, check the result:

• Compare file sizes: ls -lh source-icon.svg optimized-icon.svg
• Visually inspect both files in a browser or use a pixel‑diff tool (e.g., ImageMagick’s compare source-icon.svg optimized-icon.svg diff.png) to confirm there is no perceptible change.

If the optimized file is smaller and the visual diff shows no differences, the multipass pass succeeded.

Trade‑off and limitation

Multipass can increase optimization time because the plugin pipeline may run several times. For complex graphics this can be up to roughly double the time of a single pass. Additionally, if you rely on custom SVGO plugins that assume a single‑pass execution (e.g., plugins that insert temporary markers), repeated passes might interfere with their logic. Therefore:

• Enable --multipass in CI pipelines where build‑time budgets allow.
• Keep a single‑pass mode (svgo source.svg -o optimized.svg) for rapid local development loops.
• Always compare the output size with the original; if the multipass result is larger, fall back to the single‑pass output.

Actionable closing

To make multipass a routine part of your frontend build:

1. Add a script to your package.json:

"optimize:svg": "svgo --multipass src/assets/svg/**/*.svg -o dist/assets/svg/"

1. Hook this script into your CI step that runs before asset bundling.
2. Monitor the step’s duration; if it exceeds your threshold, consider caching SVGO’s output or limiting multipass to only the largest SVG files.

By verifying size reduction and visual fidelity after each run, you gain smaller SVG payloads without risking unintended visual changes.