Background-size with SVG squished in IE9-10

Question

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?

Answer 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.

Answer 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.

Answer 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.

Answer 4

Well, it doesn't look like there is a solution. Surprise surprise. It's IE after all. I ended up using the following code:

div {
padding: 20px;
width: 150px;
position: relative;
}

div:after {
position: absolute;
content: "";
width: 40px;
height: 40px;
top: 50%;
right: 30px;
margin-top: -20px;
background-image: url('icon.png');
background-image: url('icon.svg'), none;
}

I liked the cleaner version better, but this hack works in all modern browsers, including IE8, 9, and 10 (probably 11 but I didn't test).

Answer 5

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');

Answer 6

We had a similar issue with SVG background images that weren't the full site of a containing element (such as the magnifying glass at the left side of a search input).

We'd created out SVGs in Illustrator CC but running them through Peter Collingridge's SVG optimiser to take out all the unnecessary cruft did the trick. http://petercollingridge.appspot.com/svg-optimiser

Answer 7

I tried @mbxtr's solution

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.

That still didn't work for me on windows Chrome and IE. I was exporting a font icon, so if you have a font, make sure you export it as:

• "font: convert to outlines"
• and "responsive" is false

I also unchecked "minify" just in case...

Answer 8

1. javascript

    drips.style.top = -dripsTop + "px";
 var browser = window.navigator.userAgent;
  if (browser.indexOf("Trident") > 0) {
     $(".flow_space").css({"background":"url(../img/space2-ie.svg) no-repeat", "background-size":"100%"});
  }

---

2. svg (original height=1050) add directly to himself svg file preserveAspectRatio="none" height="2100"

Answer 9

Svg background image size will render same on IE and Chrome using these properties

background: #ffffff url("images/calendar.svg") no-repeat;
border: 1px solid #dddddd;
float: left;
margin: 0;
overflow: hidden;
background-size:15px 15px;