SVG background size differs in Internet Explorer 9 & 10

Question

I've been trying to use a SVG as a background-image for an element scaling it using the background-size-property. This works great in most current browsers, but Internet Explorer seems to misinterpret the values, showing the image in a much smaller size when I use only one value, and an incorrect ratio with two values.

I've put up an example at http://jsfiddle.net/c7DEw/1/

The width and height of the svg have been set to 100%. I figured it had something to do with the viewBox and enable-background properties, but these don't seem to have any effect.

This happens both in Internet Explorer 9 and 10.

Has anybody encountered this behaviour before? And if so, how did you fix it?

Answer 1

I had a similar problem with svg files generated by Illustrator for use as background images, and after much trial and error the fix seems to be just to edit each svg file and declare the width and height of the svg as attributes, e.g. <svg width="32px" height="128px"> (something that Illustrator doesn't set but Sketch does). This caused the svgs to behave the same in IE 10/11 as they do in Chrome/FF.