Background-size with SVG squished in IE9-10

css svg internet-explorer-9 internet-explorer-10 background-size
Julesfrog picture Julesfrog · Feb 17, 2014 · Viewed 54.2k times · Source

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

mbxtr picture mbxtr · Apr 9, 2014

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.

Related questions

SVG in img element proportions not respected in ie9

CSS: img{ max-height:30px; } HTML: <img src="foo.svg" /> I am looking for this svg image to scale proportionately to a max height of 30 pixels high. The natural dimensions of the svg are 200px by 200px. Works great …

Read More
How to change the color of an svg element?

I want to use this technique http://css-tricks.com/svg-fallbacks/ and change the svg color but so far I haven't been able to do so. I put this in the css but my image is always black, no matter what. …

Read More
How to change color of SVG image using CSS (jQuery SVG image replacement)?

This is a self Q&A of a handy piece of code I came up with. Currently, there isn't an easy way to embed an SVG image and then have access to the SVG elements via CSS. There are …

Read More