A Deep Dive into SVGO Configuration for Maximum Compression

SVGO (SVG Optimizer) is the industry standard tool for compressing SVG files. Whether you are using it via a CLI, a Webpack plugin, or a GUI tool, SVGO relies on a configuration file to determine how aggressively it should strip data from your vectors.

The problem? Most developers rely on the default settings.

While the defaults are safe, they leave a lot of bytes on the table. Here is a deep dive into configuring SVGO for maximum compression specifically tailored for web icons.

The Baseline Configuration

SVGO operates via plugins. In version 3.x, you configure it using an svgo.config.js file at the root of your project.

Here is the ultimate configuration for a standard UI icon library:

// svgo.config.js
module.exports = {
  multipass: true, // Crucial for maximum compression
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          // Keep viewBox to prevent responsive layout issues
          removeViewBox: false,
          
          // Clean up IDs but keep them if they are referenced
          cleanupIds: {
            minify: true,
            remove: true,
          },
        },
      },
    },
    'removeDimensions',
    'removeXMLNS',
    'convertStyleToAttrs',
    'sortAttrs',
  ],
};

Let’s break down the most important settings.

1. The Magic of `multipass: true`

By default, SVGO runs through your SVG file exactly once. However, some optimizations unlock the potential for other optimizations.

For example, a plugin might merge two groups together. Another plugin might be designed to delete empty groups. If the first plugin runs after the second one, you miss out on the cleanup.

Setting multipass: true forces SVGO to run its optimization loops repeatedly until the file size stops shrinking. This single setting can often shave off an additional 10-15% of your file size.

2. Managing the `viewBox` vs `width`/`height`

The default SVGO preset often strips the viewBox attribute and leaves the explicit width and height. For web icons, this is backwards.

If you strip the viewBox, your SVG loses its internal coordinate system. If you try to resize it using CSS (e.g., width: 100%), it won’t scale correctly; it will just get clipped.

The Rule:

Set removeViewBox: false.
Add the plugin 'removeDimensions'.

This combination ensures your SVG looks like this: <svg viewBox="0 0 24 24"> instead of <svg width="24" height="24">. This makes the icon infinitely scalable via CSS.

3. Precision and Path Consolidation

SVGs are made of mathematical coordinates. Design tools like Figma export these with ridiculous precision, like d="M12.456789 4.123456".

The default SVGO settings round these coordinates to 3 decimal places. For tiny UI icons (usually viewed at 24x24 pixels), you can safely round this down to 1 or 2 decimal places to save massive amounts of string data.

// Inside preset-default overrides:
convertPathData: {
  floatPrecision: 2, // Reduce from default 3
  forceAbsolutePath: false,
  utilizeAbsolute: false,
},

Test Before Deploying

Aggressively lowering floatPrecision can cause paths to “snap” and look slightly jagged. Always visually QA your icons after tweaking this setting.

4. Stripping Extraneous Attributes

Figma and Illustrator inject proprietary namespaces and metadata that the browser simply ignores. Make sure you are explicitly removing them:

'removeXMLNS': Removes xmlns="http://www.w3.org/2000/svg" (Safe for inline SVGs, do not use if saving as .svg files served via <img>).
'removeTitle': Removes <title> tags generated by Figma (Ensure you add your own accessibility labels back in your React wrapper!).

Summary

Don’t settle for default SVGO settings. By enabling multipass, aggressively rounding path precision, and protecting your viewBox, you can reduce your icon bundle size by over 50%, directly improving your site’s load time.