Why Do SVG Image Proportions Vary in Internet Explorer 9?

Image Proportion Scaling Issue in Internet Explorer 9

SVG images often display with unexpected proportions in Internet Explorer 9, even when using CSS to specify a maximum height. This discrepancy becomes apparent when comparing the behavior of various SVG files.

For example, suppose we have an SVG image with natural dimensions of 200px by 200px and a maximum height of 30px defined in CSS:

<code class="css">img {
    max-height: 30px;
}</code>

In most browsers, this SVG image scales proportionally to a height of 30 pixels. However, in Internet Explorer 9, it may display as 30x200 pixels instead.

This issue appears to be related to the type of SVG elements used. In the problematic SVG, the image is composed of polygons, while in the correctly scaling SVG, it is made up of paths.

To ensure consistent scaling across browsers, it is recommended to always specify a viewBox but leave off the width and height attributes on your SVG element. By following this practice, you can improve the compatibility of your SVG images in Internet Explorer 9 and other browsers.

The above is the detailed content of Why Do SVG Image Proportions Vary in Internet Explorer 9?. For more information, please follow other related articles on the PHP Chinese website!