Harnessing SVGO’s Multipass Mode: When Re‑running Plugins Pays Off

Problem: Size‑Sensitive SVGs in Production

Modern web apps ship dozens of SVG icons and illustrations. Even a few kilobytes per asset can add up, especially on mobile networks. Traditional single‑pass SVG optimization often leaves subtle redundancies that only become apparent after a plugin has already modified the file. The question is: how do you guarantee you’re squeezing every byte without manually tweaking each plugin?

Multipass Mechanism Explained

SVGO’s multipass feature automatically re‑runs the entire plugin pipeline until a pass produces no further changes. Internally, the tool keeps a hash of the SVG string and compares it after each full run. When the hash stays the same, the loop stops and the latest output is returned.

Key points:

• Enabled by default for most plugins, but can be toggled with the --multipass CLI flag or the multipass key in a config file.
• Each pass processes the full SVG, so the runtime grows roughly linearly with the number of passes.
• SVGO guarantees termination: a pass that does not reduce the file size or change the hash ends the loop.

Practical Benefits

When one plugin removes an ID, another may now be able to collapse a path or strip a redundant attribute. Multipass ensures those chained optimizations happen automatically. For complex illustrations, the difference can be measurable:

Run	Passes	Size Before	Size After	Reduction
Single‑pass	1	12.4 KB	10.8 KB	1.6 KB
Multipass	3	12.4 KB	9.1 KB	3.3 KB

Trade‑offs & Limitations

While multipass can yield larger savings, it is not free:

• Build time – Every additional pass adds CPU cycles. In a large project with hundreds of SVGs, this can extend the build by several seconds.
• Non‑idempotent plugins – Some plugins toggle attributes back and forth. SVGO may stop prematurely if the hash check deems the file unchanged, leaving sub‑optimal output.
• Debugging complexity – When an asset is unexpectedly large, it can be harder to pinpoint which plugin caused the issue because multiple passes are involved.

Example Workflow

Below is a typical command‑line sequence you might add to your build script:

# Single‑pass for quick linting
svgo -i icons/*.svg -o icons/opt -p

# Multipass for production assets
svgo -i icons/*.svg -o icons/opt --multipass

Verification steps:

1. Run the multipass command and note the number of passes reported in the console.
2. Compare the output size to a single‑pass run: svgo -i icons/*.svg -o icons/opt-single -p.
3. Use a diff tool to ensure the multipass output contains the expected reductions (e.g., fewer <path> commands).

Actionable Takeaway

If your project ships SVGs that are not already minified to the second, try enabling --multipass in a staging build. Measure the time impact and the size savings. If the trade‑off is acceptable, lock the flag in your production pipeline. For very large assets, consider selectively enabling multipass on only the most complex files.