Is removeViewBox still the correct default in SVGO v3/v4?
0 reputation · 30 Apr 2020, 05:22 UTC
0 reputation · 30 Apr 2020, 05:22 UTC
When upgrading from SVGO v2 to v3 or v4, the configuration schema and plugin defaults shift significantly. The removeViewBox plugin, which strips the viewBox attribute, was enabled by default in v2 but its status has been debated in v3/v4 releases. Projects that rely on intrinsic scaling may experience visual regressions if the viewBox is removed, yet disabling the plugin can increase file size and coupling to width/height attributes.
The core uncertainty is whether keeping removeViewBox enabled continues to provide safe, predictable output across major releases, or if it introduces subtle rendering differences that outweigh its benefits.
Which projects should disable removeViewBox to preserve scaling? Does enabling it break icons that depend on a viewBox for layout? What is the safest approach to decide the default setting when migrating to a newer SVGO major version?
35275 reputation · 30 Apr 2020, 11:41 UTC
No — the premise is outdated. In SVGO v2, removeViewBox was part of the default preset and stripped the viewBox attribute. In SVGO v3 (and carried into v4), the plugin is disabled by default, so viewBox is preserved unless you explicitly enable the plugin. If you upgraded and your icons suddenly scale correctly again, this change is why. If you upgraded and icons broke, the cause is almost certainly something else in your config — for example carrying over an old v2 config that explicitly enables the plugin, or a related plugin like removeDimensions.
Removing viewBox is only safe when the SVG has fixed width and height attributes that exactly match the viewBox coordinate space. In that narrow case the attribute is redundant and dropping it saves bytes. But the moment the SVG is used responsively — scaled via CSS, used as an icon font source, inlined without dimensions, or embedded with <img> in a fluid layout — the viewBox is what tells the browser how to map the internal coordinate system to the rendered size. Without it, the SVG renders at a fixed size or clips. Because that failure mode is silent and visual, the maintainers moved the plugin out of the default preset. Treat this as the confirmed behavior for v3/v4, but verify against the release notes of the exact minor version you install, since preset contents have shifted between minors.
removeViewBox for a few saved bytes, but the savings are tiny and the risk if the asset is ever reused in a responsive context is real. Most teams should still leave it off.removeDimensions, which removes width/height while keeping viewBox — the opposite trade-off, and the scaling-safe one.Confirm the version and the actual output rather than trusting the config:
npx svgo --version
npx svgo input.svg -o - | grep -o 'viewBox="[^"]*"'If the viewBox survives optimization, the plugin is off. If it disappears, check your svgo.config.js for an explicit removeViewBox entry or a v2-era preset override. Also grep your config for preset-default overrides — a common migration bug is copying a v2 config that re-enables plugins v3 removed from the preset.
Start from the v3/v4 default preset with no overrides, run it against a representative sample of your SVGs, and diff the rendered output (a visual regression tool or even side-by-side browser screenshots). Only opt into removeViewBox if you can prove every consumer of those assets supplies dimensions. When in doubt, keep the viewBox — it costs a handful of bytes and prevents an entire class of scaling bugs.
Use comments to ask for clarification. Post a solution as an answer.
No question comments on this page.