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?

Hydracid

Good question, this happened many times. – Antifouling

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.

Cheka

i had the same issue. so we opened the svg with an editor. also like mbxtr, illustrator generate svg´s without the width, height properties in <svg> tag. Your can recreate your SVG here – Yesima

This did it for me as well. I opened the SVG in my editor and copy/pasted the last two values from the viewBox property into width and height properties. So, before: <svg viewBox="0 0 800 150"> and after: <svg viewBox="0 0 800 150" width="800" height="150"> – Swelter

This is the solution. I was having problems using an SVG w/ background-position and seeing positional differences between IE, FF and Chrome. After adding a height/width to my SVG all three display correctly. – Sparge

Thank you mbxtr. That did the trick. Sorry to respond so late. I had moved on to a different project and just got back to this one. – Hydracid

My problem required me to remove the SVG code height and width values FWIW. – Barbirolli

YMMV I guess, adding width and height attributes did not work for me. IE10 still doesn't seem to know what "cover" means, it acts like "contain". – Damick

In the case where you want your SVG to be responsive to its container this won't help. I've not had luck finding a perfect solution to using SVG as background that works across all browsers, so fall back to png for background when the container is larger than the SVG itself. – Chuckhole

So there is no hope, if I want it within a responsive container?? – Smaragdite

Thank you! This solved my problem. I was using an :after pseudo element with an svg pattern. – Roath

@Chuckhole this solved it for me in IE, with a SVG as a background image in a responsive container, with background-size set to 'cover'. – Toothpaste

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.

Mathematics

Adding preserveAspectRatio="none slice" to the <svg> tag in the actual svg document just solved this problem for me! Thank you for your suggestion. – Tensimeter

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.

Cobbett

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

Thulium

That's an awesome website. Thanks for the share. – Vaniavanilla

really nice tool ! – Shrewd

Answer 5

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

Hydracid

what is the hack in it? can you please explain? – Ruzich

I think he is using different icons for different browsers.. Not suitable for everyone – Maciemaciel

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

Oblique

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

Frederique

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"

Camus

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;

Moramorabito

Answer 10

I changed all my SVGs to not responsive in Illustrator to no avail.

And because I am looking for code examples I missed that the correct answer, when saying "ensure your SVG has a width and height specified", they meant this kind of thing:

    .my-class {
        background-size: 200px 100px;
    }

And if the size is a bit off in IE vs Chrome for example I used a media query to target IE:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .my-class {
        background-size: 200px 110px;
    }
}

Buttock