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?

Good question, this happened many times. – Suresh Karia Aug 21 '19 at 05:54 — Suresh Karia, Aug 21 '19 at 05:54

score 170 · Accepted Answer · answered Apr 09 '14 at 18:23

170

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.

answered Apr 09 '14 at 18:23

mbxtr

2,323
1
15
12

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 – stephanfriedrich Sep 17 '14 at 12:41
36

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: – Tomas Lieberkind Oct 13 '14 at 12:34
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. – Mario Zigliotto Oct 20 '14 at 17:18
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. – Julesfrog Nov 15 '14 at 18:41
2

My problem required me to remove the SVG code height and width values FWIW. – Eric Steinborn Jan 07 '15 at 17:20
2

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". – James Aug 13 '15 at 15:02
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. – gunnx Nov 05 '15 at 14:03
Just what I was looking for. Thanks! – steffcarrington Nov 06 '15 at 11:18
So there is no hope, if I want it within a responsive container?? – Sanjok Gurung May 18 '16 at 11:15
Thank you! This solved my problem. I was using an :after pseudo element with an svg pattern. – Robotnicka Nov 02 '16 at 13:59
1

@gunnx this solved it for me in IE, with a SVG as a background image in a responsive container, with background-size set to 'cover'. – Matty J Dec 04 '17 at 00:00

score 19 · Answer 2 · answered Mar 03 '16 at 15:44

19

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.

answered Mar 03 '16 at 15:44

Simeon Rowsell

303
1
3
9

2

Adding `preserveAspectRatio="none slice"` to the – Micah Murray Jun 13 '16 at 13:02

score 5 · Answer 3 · answered Sep 02 '15 at 07:06

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.

score 4 · Answer 4 · answered Mar 08 '17 at 11:44

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

That's an awesome website. Thanks for the share. – MortenMoulder Mar 22 '17 at 14:39 — MortenMoulder, Mar 22 '17 at 14:39

score 3 · Answer 5 · answered Feb 18 '14 at 16:51

3

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

answered Feb 18 '14 at 16:51

Julesfrog

1,113
3
12
19

2

what is the hack in it? can you please explain? – Mr_Green Jun 12 '15 at 11:54
I think he is using different icons for different browsers.. Not suitable for everyone – Hello Universe Dec 09 '15 at 02:54

score 0 · Answer 6 · answered Aug 18 '14 at 14:21

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

score 0 · Answer 7 · answered Mar 11 '16 at 11:22

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

score 0 · Answer 8 · answered Jun 15 '16 at 06:07

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%"});
  }

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

Billu · Answer 9 · 2019-03-22T09:30:58.223

0

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;

edited Mar 22 '19 at 09:30

answered Mar 18 '19 at 11:00

Billu

2,733
26
47

cfranklin · Answer 10 · 2019-11-01T13:07:33.870

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;
    }
}

Background-size with SVG squished in IE9-10

10 Answers10

1. javascript

Linked