Background-size with SVG squished in IE9-10

I have a div set with a background image:

<div>Play Video</div>

with the following CSS:

div {
background-image: url('icon.png');
background-image: url('icon.svg'), none;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: 90% 50%;
padding: 20px;
width: 150px;
}

The background size is respected in Firefox, Safari and Chrome. In IE8, the SVG is replaced by the PNG file. However, in IE9 and IE10, the SVG file is drastically sized down. The problem seems to be linked to the width and height of the div. If I add a height of 150px, the SVG is rendered properly. If I make it smaller (i.e. 100px) the graphic starts to shrink.

Has anyone found a way to fix this issue in Explorer? Is there a way to tell IE to use the background-size value independently of the width and height of the div?

Solution 1:

Be sure that your SVG has a width and height specified. If you're generating it from Illustrator, ensure that the "Responsive" box is unchecked as this option removes width and height.

Solution 2:

Adding a width and height to the SVG as mbxtr said nearly worked for me. I needed to add preserveAspectRatio="none slice" as well to get it working responsively in IE.

Solution 3:

For me these 3 fixes helped:

• If possible set the background-position to "center"
• For background-size set both values, "100% auto" won't do the trick, so use "100% 100%"
• If that still doesn't help alter the last to values "viewBox" attribute of the SVG itself and make it one pixel wider and higher than the width and the height of the SVG. This shrinks the SVG a little bit, but stops IE from cutting it off - and the smaller size won't be noticed at all.

Solution 4:

I had this issue and I found that either removing the height and width inside the code for the svg BUT keeping the viewBox can solve the issue.

I recommend using a compiler site like : https://jakearchibald.github.io/svgomg/ and setting the option to "prefer viewBox over height and width"

ALSO if none of this works, in Illustrator try applying a square background around the svg image but leaving enough padding around the edges.

And import the svg's in your Stylesheet using --> data uri: ... example:

background-image: data-uri('image/svg+xml;charset=UTF-8',' where/your/svg/is/located');