Svgo: Removing viewBox breaks scaling in <img> tag.

[Huulivoide]

If the viewBox is removed the svg does not maintain aspect ratio if used as source for an HTML<img> tag.
This problem exist at least in Chrome and Firefox.

Therefore I think the removeViewBox plugin should be disabled by default.

Test here: https://codepen.io/Huulivoide/pen/NzPKoM

[vzaidman]

if so, id also add a warning about this in the readme

[GreLI]

If you'd use a PNG file, it will be scaled as well. In other context (e.g. element background) SVG behaves as expected, so it's just an edge case due to wrong <img> element size. Probably, a bug in browsers.

[GreLI]

On the second thought it's not a bug, just width and height attributes have no effect in that context. It just behaves like if they are absent, since only the sizes of <img> are taken in account.

[Huulivoide]

This is because the preserveAspectRatio attribute defaults to "preserve" aspect ratio mode if viewBox is defined. If no viewBox is defined then preserveAspectRatio attribute is ignored and assumed to 'none' (ignore aspect ratio), be it defined or not.

So removing viewBox attrribute also has the side effect of modifying the implied value of the preserveAspectRatio attribute.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

[GreLI]

Yeah, but usually intrinsic size from attributes width and height are in use, but it's ignored in this specific case. SVGO don't know how image will be used, that's why it is highly configurable. It has to bear reasonable balance between optimization and “safety”, so default options are usually ok, but not 100% fits to everyone. Otherwise, many optimization in 90%+ cases should be enabled manually, which is not user friendly.

[tkh44]

It is illogical for an optimization to modify the end result and thus create an unpredictable and unexpected output. When the viewBox attribute is present on an SVG tag it has a specific meaning that defines how that svg is to be displayed and rendered. Removing the attribute changes the render behavior of the SVG

If you'd use a PNG file, it will be scaled as well. In other context (e.g. element background) SVG behaves as expected, so it's just an edge case due to wrong element size. Probably, a bug in browsers.

We aren't using PNG files, we are using SVG files which use the viewBox to instruct the browser render engine to render the SVG in a specific manner.

Yeah, but usually intrinsic size from attributes width and height are in use, but it's ignored in this specific case. SVGO don't know how image will be used, that's why it is highly configurable. It has to bear reasonable balance between optimization and “safety”, so default options are usually ok, but not 100% fits to everyone. Otherwise, many optimization in 90%+ cases should be enabled manually, which is not user friendly.

It seems to me that the safer option is to not remove such a key attribute when it comes to a render engine rendering the SVG. "Safety" is not removing critical render instructions from an element in the name of optimization!