IE11 using svg as background-image fails

Question

I\'m facing a weird problem with Internet Explorer 11 running on Windows 10 machine. Using an SVG image as background thats appears totally black, Edge with the same code wo

Answer 1

I had this problem too.

In my case, changing the "styling" setting didn't help, but unchecking the "responsive" checkbox in the Illustrator SVG export dialog did, even with an internal CSS element in the SVG.

The difference is that the SVG element needs a width and height attribute.

These attributes are absent when you check the "responsive" checkbox in the Illustrator SVG export dialog. If that's really all it does, then it's poorly named, I think.

If you're using inkscape, or some other tool to make your SVGs, I am sure your observations, when added here, would be of value.

So, if you want SVG background images in CSS to work properly in IE, make sure the root element of the SVG has a width and height attribute. (e.g. by unchecking the "responsive" checkbox in AI).

The width and height attribute do not have to be the correct display size (which may change anyway, via the CSS background-size property), but they do have to be the correct aspect ratio.

If you are hand-coding the SVG markup, and the first two values for viewbox are zero, then you can just use the last two values for width and height respectively. e.g.