Preserve viewBox while shortening colors with SVGO configuration

Useful answer

If you need SVGO to keep the viewBox attribute for responsive scaling but still want hex color values shortened, configure SVGO to disable the removeViewBox plugin and enable convertColors. This combination lets you retain the viewBox while the optimizer reduces color length, delivering smaller files without breaking layout.

How SVGO works

SVGO parses an SVG file into an abstract syntax tree (AST), then runs a pipeline of plugins defined in svgo.config.js. Each plugin transforms nodes of the AST according to its rules, and the final step serializes the modified tree back to SVG markup. The behavior of the pipeline is entirely driven by the plugins you list in the configuration file, so selecting which plugins are active directly controls which optimizations are applied.

Practical configuration example

// svgo.config.js
module.exports = {
  plugins: [
    'default', // enable the standard plugin set
    { name: 'removeViewBox', active: false }, // keep the viewBox element
    { name: 'convertColors', active: true }   // shorten hex color codes
  ]
};

The active: false flag tells SVGO to skip the removeViewBox step, preserving the viewBox attribute. The convertColors plugin remains enabled, so hex values like #ff0000 become shorter forms such as #f00 when possible.

Running the CLI

Execute the command in a terminal where you have write permission to the output directory:

npx svgo src.svg -o dist.svg --config svgo.config.js

• Where to run: any shell on a machine with Node.js and npm installed.
• Required permissions: write access to the target directory for dist.svg.
• Placeholders: replace src.svg with your input file path and dist.svg with the desired output path.
• Expected checks: after execution, open dist.svg in a viewer and verify that the viewBox attribute is unchanged and that color values are shortened.
• Risks: disabling removeViewBox may leave both viewBox and width/height attributes, which can increase file size for simple inline SVGs.

Limits and common mistakes

The following points are important to consider when using this configuration:

1. Version awareness: plugin syntax changed between SVGO v2 and v3. A configuration written for v2 (e.g., using removeViewBox: true) will not run on v3, which expects an object with an active flag. Always confirm the installed major version with npx svgo --version before adopting examples from the web.
2. Unintended size impact: keeping viewBox while also preserving width and height attributes can reduce the file‑size benefit of other optimizations, especially for responsive SVGs that rely on CSS scaling.
3. Semantic breakage: enabling convertShapeToPath may replace rect, circle, or line elements with path elements, breaking CSS selectors that target those shapes directly.
4. Attribute removal hazards: removing attributes such as id or class can break external scripts or CSS that reference those identifiers, leading to loss of interactivity.

To verify that your configuration works as intended, perform the following checks:

• Run npx svgo --version to ensure you are on v3 (or the version you tested against).
• Create a test SVG that includes a viewBox and several hex colors, for example:

  <svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">

• Execute the CLI command shown above, then inspect dist.svg manually or with a diff tool to confirm that the viewBox attribute is unchanged and that color values are shortened.
• Compare the file sizes of the original and optimized files (e.g., ls -lh src.svg dist.svg) and visually render both SVGs to ensure no unintended elements were removed.

By following these steps and keeping the listed cautions in mind, you can reliably preserve the viewBox while still achieving color‑code compression with SVGO.