I came across a familiar issue last week when fixing some css bugs for a particular project, where SVG background images appeared to be squished in IE. The problem occurred wherever I had used an SVG as a css background image and scaled it with the background-size property; neither containcover, or a relative value was being respected in the correct way.

The image in this case was a little magnifying glass to the left of an input search field, in IE9, 10 and 11 it was appearing as a very tiny image:

Here’s the css that was applied to the search field:

When SVGs are used as css background images and they don’t scale correctly, it appears to be that IE is either ignoring or misinterpreting the background-size declaration. What’s actually happening is that IE miscalculates the aspect ratio of the SVG background, when the SVG doesn’t provide sufficient information for the browser to make the correct calculation.

Basically the issue here is that certain attributes are missing from the SGV code, specifically the ones that provide information on the width, height and aspect ratio behaviour. Adding the attributes: preserveAspectRatio, width and height to the SVG code will fix the issue.

Article

LEAVE A COMMENT

Notify of
avatar
wpDiscuz