title: Inline SVG in CSS doesn't work
body: <p>I use inline-SVG in CSS file to fill background for a div. But it didn't work. I test my SVG code is good. You can test by copy svg code to this <a href="https://www.rapidtables.com/web/tools/svg-viewer-editor.html" rel="nofollow noreferrer">https://www.rapidtables.com/web/tools/svg-viewer-editor.html</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#bgr{
    width:500px;
    height:500px;
    background:url('data:image/svg+xml;utf8,&lt;svg width="500" height="500"&gt;&lt;path d="M340.8,98.4c50.7,0,91.9,41.3,91.9,92.3c0,26.2-10.9,49.8-28.3,66.6L256,407.1L105,251.6c-15.8-16.6-25.6-39.1-25.6-63.9 c0-51,41.1-92.3,91.9-92.3c38.2,0,70.9,23.4,84.8,56.8C269.8,121.9,302.6,98.4,340.8,98.4" style="fill:red;"/&gt;&lt;/svg&gt;');
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="bgr"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>