Managing SVG Responsiveness with SVGO's removeDimensions Plugin

The Problem: Disappearing SVG Dimensions

When optimizing SVGs with SVGO, developers often find their images suddenly collapse to 0x0 pixels or jump to a browser default size (like 300x150) after processing. This happens because the removeDimensions plugin, which is enabled by default in the preset-default, strips the width and height attributes from the root <svg> element.

The takeaway: Removing dimensions is generally the correct move for modern, responsive web design because it allows the SVG to scale to its container via CSS using the viewBox. However, if your SVG is used as an <img> source or a CSS background-image without explicit CSS dimensions, the browser loses the intrinsic aspect ratio and size, leading to rendering failures.

How removeDimensions Works

The removeDimensions plugin removes the hardcoded width and height attributes but preserves the viewBox. The viewBox defines the internal coordinate system and aspect ratio of the SVG. When width/height are gone, the SVG becomes "fluid," meaning it will expand to fill its parent container while maintaining the proportions defined in the viewBox.

The Responsive Pattern

For most web layouts, the ideal setup is to let SVGO remove the dimensions and handle the sizing in your stylesheet:

/* CSS for a fluid, responsive SVG */
.icon-container svg {
  width: 100%;
  height: auto;
  display: block;
}

Configuration: Preserving Dimensions

If you have specific assets that must retain their original dimensions—such as icons used in legacy systems or images where you cannot control the CSS—you must override the default preset. In SVGO 3.x, configuration is handled via svgo.config.js using ESM exports.

Use the following configuration to keep width and height while still benefiting from all other default optimizations (like path simplification and metadata removal):

// svgo.config.js
export default {
  multipass: true, // Runs plugins repeatedly until output stabilizes
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          // Disable only the removeDimensions plugin
          removeDimensions: false,
        },
      },
    },
  ],
};

Running the Optimization

To apply this configuration via the CLI, run the following command in your terminal. Ensure you have Node 14+ installed, as SVGO 3.x is ESM-only.

# Run SVGO on a specific file using the config file
# Required permissions: Read/Write access to the directory
# Placeholders: input.svg (your source), output.svg (your target)
npx svgo@latest input.svg -o output.svg --config=svgo.config.js

Risk: If you disable removeDimensions globally for a project with hundreds of inlined SVGs, you may introduce unnecessary bloat and override your CSS layout intentions.

Comparison: Dimensions vs. ViewBox

Attribute	Purpose	Behavior when missing
width / height	Defines the intrinsic size of the SVG.	Browser defaults to 300x150 or 0x0.
viewBox	Defines the internal coordinate system.	SVG cannot scale proportionally; it may clip.

Common Mistakes and Limitations

The removeViewBox Trap

Never enable the removeViewBox plugin if you have already removed width and height. Removing the viewBox destroys the SVG's ability to scale, effectively breaking responsiveness. This plugin is rarely needed in modern workflows.

Precision Artifacts

While removeDimensions handles the container, the convertPathData plugin (also in the default preset) handles the internal shapes. By default, it rounds decimals to 3 places. For extremely large viewBox coordinates or high-precision technical drawings, this can cause "jittery" lines or gaps in paths.

To fix this, increase the floatPrecision in your config:

// Inside preset-default params overrides:
convertPathData: { floatPrecision: 4 }

Verification Steps

1. Diff the Output: Use a text editor or diff to ensure the <svg> tag still contains width="..." and height="..." after processing.
2. Browser Inspection: Open the SVG in Chrome or Firefox DevTools. Verify that the viewBox is present.
3. Scaling Test: Wrap the SVG in a <div> with a fixed width (e.g., width: 200px). If the SVG fills the div without distorting, the viewBox is working correctly.

Rollback

Since SVGO is a build-time transformation, the only way to rollback a change is to revert the svgo.config.js file to its previous state and re-run the optimization command on the original source files.