79

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?

1
  • Good question, this happened many times. Aug 21, 2019 at 5:54

10 Answers 10

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.

10
  • 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 Sep 17, 2014 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: <svg viewBox="0 0 800 150"> and after: <svg viewBox="0 0 800 150" width="800" height="150"> Oct 13, 2014 at 12:34
  • 2
    My problem required me to remove the SVG code height and width values FWIW. Jan 7, 2015 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, 2015 at 15:02
  • 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 4, 2017 at 0:00
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.

1
  • 2
    Adding preserveAspectRatio="none slice" to the <svg> tag in the actual svg document just solved this problem for me! Thank you for your suggestion. Jun 13, 2016 at 13:02
5

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

2
  • That's an awesome website. Thanks for the share. Mar 22, 2017 at 14:39
  • really nice tool !
    – rémy
    Jun 18, 2018 at 11:38
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).

2
  • 2
    what is the hack in it? can you please explain?
    – Mr_Green
    Jun 12, 2015 at 11:54
  • I think he is using different icons for different browsers.. Not suitable for everyone Dec 9, 2015 at 2:54
0

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

0
0

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

0

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

  1. svg (original height=1050) add directly to himself svg file preserveAspectRatio="none" height="2100"
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;
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.