title: Setting a css background image to an inline SVG symbol?
body: <p>I know external svg files can be linked to background images:</p>
  
  <pre><code>background-image: url(Icon.svg);
  </code></pre>
  
  <p>and symbols id's can be targeted from an external svg file:</p>
  
  <pre><code>background-image: url(Icons.svg#Icon-Menu);
  </code></pre>
  
  <p>but how can I set a background image to an <strong>inline</strong> svg symbol? <em>(As below)</em> </p>
  
  <p><em>My svg is at the top of my web page body and not in an external file.</em></p>
  
  <p><strong>I want <code>.test</code> background image to be the <code>#Icon-Menu</code> symbol.</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.test{
    background:#ddd url('../#Icon-Menu');
    height:100px;
    width:100px;
    display:block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="height: 0; width: 0; position: absolute; visibility: hidden;"&gt;
    &lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
      &lt;symbol id="Icon-Menu" viewBox="0 0 512 512"&gt;
        &lt;title&gt;Menu&lt;/title&gt;
        &lt;path d="M93.417,5.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V8.333 C96.417,6.679,95.071,5.333,93.417,5.333z" /&gt;
        &lt;path d="M93.417,40.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V43.333 C96.417,41.679,95.071,40.333,93.417,40.333z" /&gt;
        &lt;path d="M93.417,75.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V78.333 C96.417,76.679,95.071,75.333,93.417,75.333z" /&gt;
      &lt;/symbol&gt;
    &lt;/svg&gt;
  &lt;/div&gt;
  
  &lt;div class="test"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>