Why Do Some SVG Images Scale Disproportionately in IE9?

Addressing Scaling Issues with SVG Images in IE9

Certain SVG images fail to scale proportionately to specified max heights within the img element even if width is absent. It is observed that this disproportionate upscaling predominantly affects SVGs composed of polygons and not those created using paths.

Understanding the Discrepancy

The inconsistency stems from a lack of standardization in handling the viewBox attribute. A viewBox explicitly defines the coordinates and dimensions of the SVG's contents, which enables scaling it properly. However, browsers interpret viewBox differently.

In the affected example, the SVG lacks a viewBox attribute. Hence, IE9 interprets the width and height properties of the SVG element (rather than the image element) for scaling, leading to the disproportionate upscaling.

Resolving the Issue

To ensure consistent scaling across browsers, ensure you specify a viewBox for your SVG image while omitting the width and height attributes from the SVG element. This approach provides explicit guidance to the browser, eliminating the uncertainty that leads to disproportionate scaling in IE9.

The above is the detailed content of Why Do Some SVG Images Scale Disproportionately in IE9?. For more information, please follow other related articles on the PHP Chinese website!