IE10 SVG в CSS background

Question

У меня проблема с IE10 и SVG в стиле CSS. Он работает на хром и светлячок:

background-image: url(data:image/svg+xml,<svg\ version=\"1.1\"\ xmlns=\"http://www.w3.org/2000/svg\"\ width=\"32px\"\ height=\"32px\"\ viewBox=\"0\ 0\ 32\ 32\"><circle\ fill=\"red\"\ cx=\"16\"\ cy=\"16\"\ r=\"12\"/></svg>); 

Вот мой SVG пример, но он не работает в IE10. Есть ли возможности решить эту проблему? К сожалению, у меня нет возможности загрузить SVG из HTML, он должен быть загружен с помощью CSS, как в примере:

http://jsfiddle.net/fgLtkn1n/1/ 

.foo { 
 
    display:inline-block; 
 
    width:32px; 
 
    height:32px; 
 
    border: 1px solid gray; 
 
    background-image: url(data:image/svg+xml,<svg\ version=\"1.1\"\ xmlns=\"http://www.w3.org/2000/svg\"\ width=\"32px\"\ height=\"32px\"\ viewBox=\"0\ 0\ 32\ 32\"><circle\ fill=\"red\"\ cx=\"16\"\ cy=\"16\"\ r=\"12\"/></svg>); 
 
}

<div class='foo'></div>

Спасибо!

Answer 1

Единственный полный кросс-браузер dataURI-заголовок, который я нашел, - data:image/svg+xml; charset=utf8,.

Кроме того, вам, вероятно, нужно encodeURI ваш SVG разметки:

.foo { 
 
    display:inline-block; 
 
    width:32px; 
 
    height:32px; 
 
    border: 1px solid gray; 
 
    background-image: url('data:image/svg+xml; charset=utf8, %3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20fill%3D%22red%22%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2212%22%2F%3E%3C%2Fsvg%3E'); 
 
}

<div class='foo'></div>