SVGO Multipass Optimization: Plugin Choices & Trade‑offs

Why SVG Size Matters

When you ship a web page, every kilobyte counts. SVGs are often the largest asset on a page because they contain XML markup, style information, and sometimes embedded raster data. A 200 KB icon can add 50 ms of render time on a slow network. The question isn’t *if* you need to shrink SVGs, but *how* to do it without breaking the visual fidelity your users expect.

SVGO’s Plugin‑Based Architecture

SVGO treats each optimization as a tiny, focused plugin. Think of each plugin as a rule that says: “If you see a <metadata> element, remove it.” The full list is extensive, but the most common ones include:

• removeComments – strips <!-- … --> blocks.
• removeMetadata – deletes <metadata> tags.
• convertStyleToAttrs – turns CSS style declarations into XML attributes for better legacy support.
• cleanupNumericValues – reduces floating‑point precision in path data.
• mergePaths – concatenates adjacent <path> elements.

Plugins are enabled or disabled in a JSON config file. This lets teams keep a baseline of safe, non‑breaking optimizations while experimenting with more aggressive ones.

The Multipass Feature

Some optimizations create new opportunities for other plugins. For example, cleanupNumericValues may reduce a path’s precision, enabling mergePaths to combine two paths that were previously distinct. The multipass flag tells SVGO to run the entire plugin set repeatedly until a pass yields no changes.

Typical invocation:

svgo --multipass -i input.svg -o output.svg

Running in multipass mode can increase build time, especially for a library of 500+ SVGs, but the file‑size savings can be significant—often 5–15 % more than a single pass.

Concrete Example: Configuring and Testing

Below is a minimal svgo.config.js that turns on multipass and a few key plugins. Replace YOUR_SVG with your file path.

module.exports = {
  multipass: true,
  plugins: [
    {
      name: "removeComments",
      active: true
    },
    {
      name: "removeMetadata",
      active: true
    },
    {
      name: "convertStyleToAttrs",
      active: true
    },
    {
      name: "cleanupNumericValues",
      active: true,
      params: {
        floatPrecision: 2
      }
    }
  ]
};

Run the optimizer:

npx svgo -c svgo.config.js -i path/to/YOUR_SVG.svg -o path/to/optimized.svg

Verify the changes:

1. Check file sizes:

   ls -lh path/to/YOUR_SVG.svg path/to/optimized.svg
   

2. Open optimized.svg in a text editor and confirm that <!-- … --> blocks are gone, and that numeric values look rounded to two decimal places.
3. Render the SVG in a browser next to the original to spot any visual differences. In complex illustrations, a 0.01‑unit change can cause slight jitter—look for misaligned strokes or gaps.

Trade‑offs & When to Enable Multipass

Pros

• Maximizes size reduction by letting plugins work on the results of others.
• Often automates decisions that would otherwise require manual tweaking.

Cons

• Build times can double for large SVG sets because each pass re‑parses the file.
• Aggressive numeric precision reduction may introduce visual artifacts, especially in complex gradients or subtle curves.
• Plugins that remove IDs or classes can break CSS selectors or JavaScript that rely on those identifiers.

Use multipass when:

• Your build pipeline tolerates a 20–30 % increase in SVG optimization time.
• Visual fidelity is critical, so you’ll run a visual regression test after optimization.
• You’re targeting environments where legacy rendering engines (e.g., older Android WebViews) require style attributes rather than CSS.

Actionable Checklist for Your Project

1. Start with a baseline config that disables only the most aggressive plugins (e.g., cleanupNumericValues with floatPrecision set to 2).
2. Run SVGO once with --multipass and compare file sizes.
3. Open the optimized SVG in a headless browser (Puppeteer, Playwright) and capture a screenshot. Compare pixel‑by‑pixel against the original.
4. If visual differences are acceptable, commit the config. If not, lower the precision or disable the offending plugin.
5. Add a CI step that runs SVGO on all SVGs and fails if the size reduction is below a threshold you consider worthwhile.

By combining a disciplined plugin list with multipass and automated visual checks, you can confidently squeeze every byte out of your SVG assets without compromising the user experience.