SVGO Path Data Optimization: Collapse and Convert for Smaller SVGs

Quick Answer: Reduce SVG Path Size with Two Key Plugins

Use SVGO's collapseRepeated and convertPathToShortcuts plugins together to shrink SVG files by eliminating redundant commands and converting absolute coordinates to relative ones. This combination can reduce path data size by 10-30% without visual changes.

How the Optimization Works

Consider this path with redundant segments:

M 10 10 L 20 10 L 30 10 L 40 10

SVGO transforms this through two steps:

1. convertPathToShortcuts converts absolute L to relative l:

M 10 10 l 10 0 l 10 0 l 10 0

1. collapseRepeated merges consecutive identical commands:

M 10 10 l 10 0 3

The result uses 50% fewer characters while drawing the same line.

Configuration Example

Create .svgo.yml in your project root:

plugins:
  - collapseRepeated
  - convertPathToShortcuts
  - removeUnusedNS
  - cleanupIDs
  - removeDimensions

Then run:

svgo --input input.svg --output output.svg

Common Pitfalls and Limitations

Visual fidelity risks: Aggressive path optimization can shift coordinates in complex graphics. Always compare optimized SVGs against originals in multiple browsers.

Plugin order matters: convertPathToShortcuts should run before collapseRepeated for maximum effect. SVGO's default plugin order handles this correctly.

Irreversible changes: Some optimizations like arc-to-line conversion (convertArcToLine) permanently alter curve data. Test curved elements carefully.

Verification Steps

1. Install SVGO globally: npm install -g svgo
2. Optimize a test file: svgo --input test.svg --output optimized.svg
3. Compare file sizes: ls -la test.svg optimized.svg
4. Visual verification: Open both in a browser and toggle between them

When Not to Use These Plugins

Avoid path optimization for:

• SVGs with precise coordinate requirements (CAD drawings, icons with tight tolerances)
• Graphics containing many small curves that may render differently
• Files where visual regression testing isn't feasible