title: CSS: Using raw svg in the URL parameter of a background-image in IE
body: <p>So, I'm trying to do something like this:</p>
  
  <pre><code>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,&lt;svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' style='fill:red; stroke:none'&gt;&lt;rect x='0' y='40' width='100' height='20' /&gt;&lt;rect x='40' y='0' width='20' height='100' /&gt;&lt;/svg&gt;");
  }
  </code></pre>
  
  <p>See here: <a href="http://jsfiddle.net/trxkcx41/4/" rel="noreferrer">http://jsfiddle.net/trxkcx41/4/</a></p>
  
  <p>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.</p>
  
  <p>Is that because this is not supported in IE, or because I'm doing something wrong?</p>
  
  <p><strong><em>[UPDATE WITH SOLUTION]</em></strong></p>
  
  <p>Thanks to <a href="https://stackoverflow.com/users/804867/hungerstar">hungerstar</a>, I've got this working. To summarize his recommendation, I needed to make the following changes:</p>
  
  <ol>
  <li><p>Change the data type from <code>data:image/svg+xml;utf8</code> to <code>data:image/svg+xml;charset=utf8</code> (i.e., <code>charset=</code> is required)</p></li>
  <li><p>URL encode the svg. To minimize the URL-encoding, use <code>'</code> instead of <code>"</code> to enclose the attributes. So, in my case, only the <code>&lt;</code> and <code>&gt;</code> needed to be encoded.</p></li>
  </ol>
  
  <p>To, ultimately, my CSS looked like this:</p>
  
  <pre><code>    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");
  </code></pre>