title: IE10 SVG in CSS background
body: <p>I have a problem with IE10 and SVG in CSS style. It works on chrome and firefox:</p>
  
  <pre><code>background-image: url(data:image/svg+xml,&lt;svg\ version=\"1.1\"\ xmlns=\"http://www.w3.org/2000/svg\"\ width=\"32px\"\ height=\"32px\"\ viewBox=\"0\ 0\ 32\ 32\"&gt;&lt;circle\ fill=\"red\"\ cx=\"16\"\ cy=\"16\"\ r=\"12\"/&gt;&lt;/svg&gt;);
  </code></pre>
  
  <p>Here is my SVG example, but it doesn't work in IE10. Are there any opportunities to resolve this problem? Unfortunately I have no opportunity to load SVG from HTML, it should be loaded from CSS like in example:</p>
  
  <pre><code>http://jsfiddle.net/fgLtkn1n/1/
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.foo {
      display:inline-block;
      width:32px;
      height:32px;
      border: 1px solid gray;
      background-image: url(data:image/svg+xml,&lt;svg\ version=\"1.1\"\ xmlns=\"http://www.w3.org/2000/svg\"\ width=\"32px\"\ height=\"32px\"\ viewBox=\"0\ 0\ 32\ 32\"&gt;&lt;circle\ fill=\"red\"\ cx=\"16\"\ cy=\"16\"\ r=\"12\"/&gt;&lt;/svg&gt;);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='foo'&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks!</p>