do not remove svg viewbox by default

[vaaas]

↪️ Pull Request

Removing the viewBox from an SVG file breaks automatic SVG scaling, resulting in rendering that is radically different in production versus in development. SVGs are assumed to be scalable by default by most designers.

SVGO has changed their defaults to remove the viewBox, which has been the source of much drama, and their maintainers have been historically resistant in changing it. Until this situation changes, manually disable viewBox removal.

See #4314

💻 Examples

Use any SVG with a viewbox. You can use the following:

<svg xmlns="http://www.w3.org/2000/svg" width="41.402" height="48.027" viewBox="0 0 41.402 48.027" fill="none"><path d="M10.971 23.349l3.522 2.023v-4.566l9.586-5.606-3.465-2.138-9.643 5.664z" fill="#3b4550"/><path d="M20.615 0l7.969 4.624L7.622 17.05v10.692L0 23.291v-11.27z" fill="#64bc4f"/><path d="M26.158 16.414l-3.522 2.023 4.042 2.37-.058 10.808 3.522-2.023V18.726z" fill="#3b4550"/><path d="M41.402 35.891l-7.969 4.739V16.876l-9.643-5.664 8.084-4.681 9.528 5.548z" fill="#64bc4f"/><path d="M24.599 32.885v-3.93l-4.042 2.37-9.585-5.606v3.93l9.643 5.606z" fill="#3b4550"/><path d="M0 36.064v-8.785l20.615 11.79 9.47-5.664.058 9.132-9.297 5.49z" fill="#64bc4f"/></svg>

Notice that optimising it by default removes the viewBox property.

🚨 Test instructions

1. Create any bundle importing an SVG with a viewBox, eg through bundle-text.
2. Create an optimised bundle (usually production bundle).
3. Confirm that the viewBox is not removed by examining the source code.

✔️ PR Todo

• Added/updated unit tests for this change
• Filled out test instructions (In case there aren't any unit tests)
• Included links to related issues/PRs

[devongovett]

In your example, removing the viewBox has no effect though because of the width and height attributes. Does svgo still remove it if those are not present? Are you overriding the width/height attributes via an external style or something?

[webgzh907247189]

you can add file .svgrrc.js

• the content write

module.exports = {
  dimensions: false
}

@Parcel/config default depends on @ svgr/plugin svgo,
@there is this setting in svgr/plugin svgo, refer to the source code link https://github.com/gregberge/svgr/blob/449f28123115501443e810a850dbc0f810eee533/packages/plugin-svgo/src/config.ts#L22