CSS: Using raw svg in the URL parameter of a background-image in IE

Question

So, I\'m trying to do something like this:

div {
    width: 100px;
    height: 100px;
    background-position: center center;
    background-repeat: no-repea         


        

Answer 1

Just a note to this. In IE 11 you can use charset=utf8. You have to URL-encode at least < and > (providing that you use '' for attribute values not "". Also, be careful in case you use any non-ASCII characters. You have to provide their UTF-8 encoded value - i.e. find some tool that gives you UTF-8 code for the character (like Babel Map) and then provide it in URL encoded form. i.e. I wanted to render the ▾ character (U+25BE). UTF-8 representation of the character is \xE2\x96\xBE and %E2%96%BE in URL-encoded form.

background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='gray'%3E%E2%96%BE%3C/text%3E%3C/svg%3E");