Tuning SVGO’s Multipass Optimization for Deeper SVG Cleanup

Desired Outcome

Enable SVGO’s --multipass flag and configure its plugin set so that repeated optimization passes reduce file size by at least 10% while keeping the visual appearance unchanged.

Prerequisites

• Node.js 14+ and npm installed.
• SVGO installed locally (recommended npm install svgo@^3.0.0 – pin the version in package.json).
• Basic knowledge of SVG structure (viewBox, paths, gradients, etc.).
• Access to a modern browser or an SVG rendering library for visual verification.

Focused Procedure

1. Create a base configuration file

   SVGO reads svgo.config.js by default. Place the following skeleton in your project root:

   module.exports = {
     multipass: true,
     plugins: [
       // Preserve layout-critical attributes
       "removeViewBox",
       // Standard cleanup plugins
       "removeDoctype",
       "removeComments",
       "removeMetadata",
       "removeTitle",
       "removeDesc",
       // Numeric precision control
       { name: "convertPathData", params: { floatPrecision: 2 } },
       // Enable or disable plugins that may affect rendering
       { name: "removeUnusedDefs", active: true },
     ],
   };
   

   Explanation of key terms:

   • multipass: run optimization until no further changes occur.
   • Plugin names are either booleans (enabled by default) or objects with params for fine‑tuning.
   • Numeric precision (floatPrecision) controls how many decimal places are kept.
2. Run SVGO with multipass

   Execute from the command line, ensuring you point to the correct input and output files:

   npx svgo --multipass --config=svgo.config.js input.svg output.svg
   

   Permissions: the process must write to output.svg. If the file already exists, SVGO will overwrite it.

3. Verify file size reduction

   Compare the sizes:

   stat -c "%s" input.svg output.svg
   

   A reduction of 10% or more indicates the multipass loop is effective.

4. Check visual fidelity
   1. Open both input.svg and output.svg in a modern browser (Chrome, Firefox, Edge).
   2. Use the browser’s dev‑tools to inspect differences in rendering – particularly gradients, clip paths, and text.
   3. Optional: render both files in an automated test harness and compare pixel data (e.g., pixelmatch).
5. Ensure deterministic output

   Run the command twice and compute checksums:

   sha256sum output.svg
   

   The hash should match across runs, confirming that the multipass loop is deterministic for a given configuration.

Expected Checks and Recovery Options

• Check 1: Size Reduction
  • Use stat or a file‑size viewer. If output.svg is larger, review the plugin list – disabling removeUnusedDefs or lowering floatPrecision may help.
• Check 2: Rendering Integrity
  • Any visible differences (missing gradient stops, clipped text) suggest that a plugin removed an attribute that a browser relies on. Re‑enable the plugin or adjust its parameters.
• Check 3: Performance
  • Measure runtime with time or a profiling tool. If processing time is unacceptable, reduce the number of passes by disabling multipass or by limiting the plugins that trigger additional passes.
• Recovery: Revert to Single Pass
  • Change multipass: true to multipass: false in svgo.config.js and rerun. This restores the original one‑pass behavior.
  • Alternatively, temporarily comment out heavy plugins and re‑run to isolate the culprit.

Limitations and Practical Tips

• Some browsers depend on attributes that removeUnusedDefs may strip. Always test in the target environment.
• SVGO’s plugin set evolves; a configuration that works on v3.0.0 may change in v4.0.0. Pin the version in package.json and lock dependencies with npm ci for repeatable builds.
• Multipass can increase runtime 2–5×. For large SVG collections, consider running SVGO in parallel or caching results.
• When precision is critical (e.g., scientific diagrams), avoid aggressive floatPrecision reductions.

Concrete Example: Optimizing a Complex Icon Set

Assume you have icons/ containing 200 SVGs. The following script applies multipass optimization and reports the aggregate size savings:

#!/usr/bin/env node
const fs = require('fs');
const { execSync } = require('child_process');
const path = require('path');

const inputDir = 'icons';
const outputDir = 'icons_opt';

if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir);

const files = fs.readdirSync(inputDir).filter(f => f.endsWith('.svg'));
let totalBefore = 0, totalAfter = 0;

files.forEach(file => {
  const inPath = path.join(inputDir, file);
  const outPath = path.join(outputDir, file);
  const sizeBefore = fs.statSync(inPath).size;
  execSync(`npx svgo --multipass --config=svgo.config.js ${inPath} ${outPath}`);
  const sizeAfter = fs.statSync(outPath).size;
  totalBefore += sizeBefore;
  totalAfter += sizeAfter;
  console.log(`${file}: ${((sizeBefore - sizeAfter) / sizeBefore * 100).toFixed(1)}% saved`);
});

console.log(`Total: ${(totalBefore - totalAfter) / totalBefore * 100).toFixed(1)}% saved`);

Run this script after pinning SVGO and observe the aggregate savings. Adjust floatPrecision or disable removeUnusedDefs if any icons render incorrectly.

Conclusion

Multipass optimization in SVGO can deliver significant file‑size reductions, but it requires careful plugin selection and thorough visual testing. By following the steps above, you can enable multipass, tune precision, verify deterministic output, and recover quickly if rendering breaks.