Embedded SVG does not work as background image in IE

Question

I am trying to set the background-imagecss property for the content URI of encoded data, as shown in this script

It works as expected for all browsers you are testing. The only browser that does not display content is IE 9/10.

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

If an SVG is created in IE (as in the first Raphaël script), it is not displayed if used as background-imagedata.

Where is the problem in IE? Is this related to my code or something went wrong in the SVH Raphaël picture?

Answer 1

It seems like this is the most cross-browser compatible way (and the only way to get IE to show SVG as CSS background) is the base64 encode (aka dataURI) SVG, as you did in your first fiddle.

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

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