Taming SVG Bloat with SVGO's preset-default

The Problem: Export Bloat

Design tools like Figma, Adobe Illustrator, and Inkscape produce SVG files that are functionally correct but technically noisy. They often include metadata, editor-specific namespaces, redundant groups, and overly precise coordinate data that serve no purpose in a production browser environment. This bloat increases page load times and complicates version control diffs.

The most efficient way to handle this is not by manually toggling dozens of individual optimization rules, but by leveraging the preset-default in SVGO. This preset provides a curated baseline of optimizations that strip the noise while preserving the visual intent of the graphic.

How preset-default Works

The preset-default is a bundle of plugins designed to balance file size reduction with visual fidelity. It handles common tasks such as removeDoctype (removing the XML declaration), removeComments, and convertPathData (which rounds coordinates to reduce character count).

Rather than treating the SVG as a simple string, SVGO operates on the DOM representation of the file. This ensures that optimizations are applied in a deterministic order. For example, it will clean up attributes before attempting to merge paths, preventing the tool from missing optimization opportunities that only appear after a previous cleanup step.

The Critical ViewBox Trade-off

One of the most common pitfalls when adopting the default preset is the handling of the viewBox attribute. In many default configurations, the removeViewBox plugin may be active. If the viewBox is removed and replaced with static width and height attributes, the SVG loses its ability to scale responsively within a CSS container.

To maintain responsive behavior, you must explicitly override this specific sub-plugin within the preset configuration to ensure the viewBox is preserved regardless of other dimensions.

Worked Example: Customizing the Preset

To implement SVGO in a project, you typically create an svgo.config.js file in your root directory. The following configuration applies the default optimizations but protects the viewBox and enables multipass for maximum compression.

// svgo.config.js
module.exports = {
  multipass: true, // Iterate until no further optimizations are possible
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          // Prevent the removal of the viewBox attribute for responsive scaling
          removeViewBox: false,
        },
      },
    },
  ],
};

Execution: Run the following command in your terminal (requires Node.js and SVGO installed globally or as a dev dependency):

# Run SVGO on a specific folder of icons
# Permissions: Standard user permissions for the local directory
# Risk: Overwrites files unless -o (output) flag is used
npx svgo -f src/assets/icons -o src/assets/icons-optimized

Verification Steps

1. Version Check: Run svgo -v to ensure you are on a 2.x version, as plugin structures changed significantly from 1.x.
2. Visual Regression: Open the original and optimized SVG side-by-side in a browser. Check specifically for "rounding errors" in complex paths.
3. Scaling Test: Place the optimized SVG in a container with width: 100%. If the SVG does not scale to fill the container, the removeViewBox plugin was likely active.

Performance and Limitations

While multipass: true ensures the smallest possible file size, it introduces a linear increase in build time. SVGO will run the entire plugin set repeatedly until the file size stops shrinking. For a few dozen icons, this is negligible; for a library of thousands of complex SVGs in a CI/CD pipeline, it can noticeably slow down the build.

Additionally, some optimizations like convertPathData can occasionally cause subtle visual shifts in highly intricate technical drawings. If you notice "jitter" in your lines, you may need to adjust the floatPrecision parameter within the preset to a higher decimal value.

Closing Action

If your project currently commits raw SVG exports from design tools, implement preset-default with removeViewBox: false. This provides an immediate 15–30% reduction in asset size with minimal risk to visual integrity.