Why Do My SVGs Scale Incorrectly in IE9, But Only Some of Them?

SVG Proportions Distorted in IE9 for Specific Images

When using SVGs within img elements, you may encounter unexpected scaling issues. In Internet Explorer 9, certain SVGs may scale incorrectly, failing to maintain their original proportions. This can occur despite specifying max-height through CSS.

The discrepancy arises when using SVGs consisting of paths versus polygons. For example, the "crocs.svg" image mentioned in the question does not scale correctly, while the "groovy.svg" image does.

Solution: Ensure ViewBox and Omit Element Width/Height Attributes

To resolve this issue and ensure consistent scaling across browsers, it is recommended to always specify a viewBox attribute within your SVG element. However, leave the width and height attributes blank.

By doing this, you are explicitly defining the dimensions of the SVG and allowing browsers to interpret the CSS max-height property accordingly. It ensures more consistent scaling across various browsers.

For further understanding, refer to this test page: [Test Page Link]. This page provides various examples of SVG attributes in combination with CSS width and height specifications. By comparing the scaling in different browsers, you can observe the impact of these attributes on SVG rendering.

The above is the detailed content of Why Do My SVGs Scale Incorrectly in IE9, But Only Some of Them?. For more information, please follow other related articles on the PHP Chinese website!