title: How to use an SGV in a symbol tag as a background image
body: <p>I'm trying to use an SVG from a sprite as a background image as per <a href="http://dev.webonomic.nl/unleash-the-power-of-svg-sprites" rel="nofollow">this article</a>. Each image in wrapped in symbol tags as per <a href="http://css-tricks.com/svg-symbol-good-choice-icons/" rel="nofollow">this article</a>.</p>
  
  <p>My sprite.svg looks like this:</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" style="display: none;"&gt;
  
      &lt;symbol id='home' width="20" height="20" viewBox="0 0 2304 2304"&gt;
          &lt;path d="M1728 1248v480q0 26-19 45t-45 19h-384v-384h-256v384h-384q-26 0-45-19t-19-45v-480q0-1 .5-3t.5-3l575-474 575 474q1 2 1 6zm223-69l-62 74q-8 9-21 11h-3q-13 0-21-7l-692-577-692 577q-12 8-24 7-13-2-21-11l-62-74q-8-10-7-23.5t11-21.5l719-599q32-26 76-26t76 26l244 204v-195q0-14 9-23t23-9h192q14 0 23 9t9 23v408l219 182q10 8 11 21.5t-7 23.5z" fill="#7C7C7C"/&gt;
      &lt;/symbol&gt;
  
      &lt;symbol id='plus'&gt;
              &lt;path d="M13.563 5.25h-4.813v-4.813c0-0.242-0.196-0.438-0.438-0.438h-2.625c-0.242 0-0.438 0.196-0.438 0.438v4.813h-4.813c-0.242 0-0.438 0.196-0.438 0.438v2.625c0 0.242 0.196 0.438 0.438 0.438h4.813v4.813c0 0.242 0.196 0.438 0.438 0.438h2.625c0.242 0 0.438-0.196 0.438-0.438v-4.813h4.813c0.242 0 0.438-0.196 0.438-0.438v-2.625c0-0.242-0.196-0.438-0.438-0.438z" fill="#000000"&gt;&lt;/path&gt;  
      &lt;/symbol&gt;
  
  &lt;/svg&gt;
  </code></pre>
  
  <p>My HTML looks like this:</p>
  
  <pre><code>&lt;a href="#" class="home-icon"&gt;Home&lt;/a&gt;
  </code></pre>
  
  <p>And my CSS looks like this:</p>
  
  <pre><code>.home-icon {
      background-image: url("../img/icons/sprite.svg#home");
      height: 14px;
      overflow: hidden;
      text-indent: -100px;
      width: 14px;
  }
  </code></pre>
  
  <p>But it is not showing up. It did work when I used <code>&lt;g&gt;</code> tags as opposed to <code>&lt;symbol&gt;</code> but that limits me to having every image the same size.</p>