Optimizing SVGs with SVGO: Keep Visual Fidelity While Cutting Size

Why the ViewBox Matters Even When You’re Trying to Shrink

When you run SVGO, the first thing the tool looks for is the viewBox attribute. It’s a little bit like the canvas size for the SVG – it tells browsers how to scale the graphic. Removing it can shave a few bytes off the file, but it also strips away the ability to scale the icon responsively. In many projects, especially those that use icons at different sizes or in a grid, the viewBox is essential.

SVGO’s removeViewBox plugin is therefore a double‑edged sword. If you disable it, you keep the scaling behaviour but lose the potential 1–3% size reduction. If you enable it, you may lose the ability to resize the icon without distortion.

ConvertPathData: The Real Savings Engine

The convertPathData plugin is where most of the bulk savings happen. It collapses redundant commands, removes unnecessary whitespace, and converts absolute coordinates to relative ones when that shortens the string. The plugin also accepts a pathDataMinLength threshold – paths shorter than this value are left untouched; longer ones are aggressively compressed.

Typical results: a 10–30% reduction in file size for a complex icon without any visual change. The trade‑off is that if the threshold is set too low, the plugin might over‑compress a path that contains subtle curvature, producing a slightly different shape.

Ordering the Pipeline Matters

SVGO processes plugins in the order they appear in the config file. Running convertPathData before removeViewBox can preserve more information because the path data is already in its minimal form when the viewBox is evaluated. If you reverse the order, the viewBox removal may consider the original, longer path data and decide to drop the attribute, leading to a larger loss of scaling capability.

Step‑by‑Step Example

1. Create a simple icon (icon.svg):

   <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
     <path d="M16 2 L30 30 L2 30 Z" fill="#000"/>
   </svg>

2. Write a SVGO config (config.json):

   {
     "plugins": [
       {
         "name": "convertPathData",
         "params": {
           "pathDataMinLength": 20
         }
       },
       {
         "name": "removeViewBox",
         "active": false
       }
     ]
   }

3. Run SVGO:

   svgo -c config.json icon.svg

   SVGO will read icon.svg, apply the plugins in order, and output icon.svg with the optimizations applied.

4. Verify the result:

   • File size: stat -c %s icon.svg should show a 15–25% drop compared to the original.
   • Visual check: Open the file in a browser; it should look identical.
   • Hash check: sha256sum icon.svg and compare to the original to ensure no unintended changes.

Trade‑Offs and Limitations

• ViewBox Removal: Disabling removeViewBox keeps scaling but increases size. If your project doesn’t rely on responsive scaling, you can enable it for a small gain.
• Path Data Aggressiveness: Setting pathDataMinLength too low can alter curves. Test with a visual diff tool if you have complex icons.
• Plugin Interaction: Some plugins depend on the state left by previous ones. Always run a full visual regression test after changes.

Actionable Takeaway

For most icon libraries:

• Keep removeViewBox disabled to preserve responsive behaviour.
• Enable convertPathData with a pathDataMinLength of 20–30 to get consistent 15–25% size savings.
• Place convertPathData before removeViewBox in the config.
• After each change, run a quick size check and a visual diff to confirm fidelity.

By following this pattern, you’ll consistently shrink SVGs while keeping the graphics exactly how you intended them to look.