So, I'm trying to do something like this:
div {
width: 100px;
height: 100px;
background-position: center center;
background-repeat: no-repeat;
background-size: 100px 100px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' style='fill:red; stroke:none'><rect x='0' y='40' width='100' height='20' /><rect x='40' y='0' width='20' height='100' /></svg>");
}
See here: http://jsfiddle.net/trxkcx41/4/
This works beautifully in current versions Chrome, Safari (OS X and iOS), and Firefox. However, the SVG doesn't appear at all in IE 9, 10, or 11.
Is that because this is not supported in IE, or because I'm doing something wrong?
[UPDATE WITH SOLUTION]
Thanks to hungerstar, I've got this working. To summarize his recommendation, I needed to make the following changes:
Change the data type from
data:image/svg+xml;utf8
todata:image/svg+xml;charset=utf8
(i.e.,charset=
is required)URL encode the svg. To minimize the URL-encoding, use
'
instead of"
to enclose the attributes. So, in my case, only the<
and>
needed to be encoded.
To, ultimately, my CSS looked like this:
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' style='fill:red; stroke:none' %3E%3Crect x='0' y='40' width='100' height='20' /%3E%3Crect x='40' y='0' width='20' height='100' /%3E%3C/svg%3E");