Inline SVG not working as background-image in IE

Question

I'm trying to set the background-image css property to encoded data URI content as shown in this fiddle

It works as expected for all browsers I tested. The only browser that doesn't show the contents is IE 9/10.

But I have another example that works in IE 9/10. The difference here is that the data URI contents are initially created in Chrome (by Raphaël) and then used in the example.

If the SVG is created in IE (as in the 1st fiddle by Raphaël) itself it's not being displayed if used as background-image data.

Where is the issue in IE? Is it related to my code or maybe something goes wrong in the Raphaël SVG painting?

Answer 1

It looks like the most cross-browser compatible way to do this (and the only way to get IE to show the SVG as a CSS background) is to base64 encode (a.k.a dataURI) the SVG as you did in your 1st fiddle.

I found the comments discussion at the bottom of this article helpful

http://css-tricks.com/probably-dont-base64-svg