Diagnosing SVGO removeViewBox Scaling Issues in Optimized SVGs

The problem: SVG stops scaling after SVGO optimization

You run SVGO on an SVG file, then use it in a responsive layout with width: 100%; height: auto;. The graphic no longer scales with its container. It may stay locked to a fixed pixel size, overflow its parent, or disappear entirely at certain viewport widths.

The cause is usually SVGO's removeViewBox plugin. viewBox is an SVG attribute that defines the coordinate system and aspect ratio of the graphic. When the plugin removes it from an SVG that also lacks explicit width and height attributes, the browser loses the information it needs to calculate intrinsic dimensions.

Useful takeaway: if an SVG scaled correctly before optimization and breaks afterward, check the optimized output for a missing viewBox. Restoring the attribute—or telling SVGO to preserve it—typically fixes the layout without disabling optimization entirely.

Recognizable condition

• The SVG displays at a fixed size regardless of container width.
• The graphic overflows or is clipped when the viewport changes.
• The optimized source contains width or height but no viewBox.
• The unoptimized original scales correctly in the same layout.

Cause and diagnostic table

Observed symptom	Likely cause
SVG stuck at fixed pixel size after optimization	viewBox removed; no width or height to fall back on
Graphic overflows container or gets clipped	viewBox removed; CSS height: auto cannot derive intrinsic height
Aspect ratio distorted	width and height present but do not match the original coordinate system; viewBox missing

Ordered checks

1. Open the optimized SVG in a text editor and search for viewBox. If the attribute is absent, proceed to step 2.
2. Check whether the root <svg> element has width and height attributes. Note their values.
3. Open the unoptimized original and compare its root element attributes. Record the original viewBox, width, and height if present.
4. Load both files in a browser inside a container styled with width: 100%; height: auto;. Resize the window. Confirm the original scales while the optimized file does not.
5. Run SVGO against the original with removeViewBox disabled and compare the output. If the new output scales correctly, the plugin is confirmed as the cause.

Command to isolate the plugin

npx svgo --disable=removeViewBox input.svg -o output.svg

Run this in the project directory where the SVG lives. You need read access to input.svg and write access to the output directory; no elevated permissions are required. input.svg and output.svg are placeholders—replace them with your actual file paths. The risk is that the output file may be slightly larger because viewBox is retained; there is no risk to the original file.

Fixes tied to each finding

Finding: viewBox missing, width and height missing

Add viewBox back to the root element. If the original SVG had viewBox="0 0 800 600", restore that exact value. If you do not know the original values, derive them from the graphic's coordinate system or use the width and height values if they were present before optimization.

Finding: viewBox missing, width and height present but mismatched

Either add a viewBox that matches the intended aspect ratio, or remove the conflicting width and height attributes and let viewBox control intrinsic sizing. CSS can still set the display size independently.

Finding: removeViewBox is active in your build pipeline

Configure SVGO to preserve viewBox for files that lack width and height, rather than disabling the plugin globally. Example configuration:

module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false,
        },
      },
    },
  ],
};

If you only want to exclude specific files, apply this configuration to those entry points or run SVGO with --disable=removeViewBox on them individually.

Manual attribute restoration

Open the optimized SVG and add the attribute to the root element:

<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">

Replace 0 0 800 600 with values from the unoptimized original. Save the file and reload the page.

Verification

After applying a fix, inspect the optimized SVG source for viewBox. Then open the page, resize the browser window or container, and confirm the graphic scales proportionally without clipping or overflow. If you edited the file directly, keep a backup copy of the pre-fix version so you can restore it if the new attribute introduces errors.

Escalation criteria

• If viewBox is present but scaling still fails, check preserveAspectRatio, CSS transforms, and parent container constraints such as fixed heights or overflow: hidden.
• If every SVG in the pipeline is affected, the issue is likely in the SVGO configuration file rather than an individual file.
• If the build fails after changing plugin settings, confirm your SVGO version supports the configuration syntax you used; plugin names and parameter formats differ between major versions.

Limitations

This guide covers attribute-level scaling problems caused by removeViewBox. It does not address malformed SVG syntax, server-side SVG rendering, or issues introduced by other SVGO plugins. Restoring viewBox may slightly increase file size compared with an aggressively optimized output.