title: Why are my SVGs in def group not showing?
body: <p>I can't explain following behavior. I used grunt svg sprite to create a SVG sprite of all my SVG Files in a certain directory. </p>
  
  <p>Structure looks like this:</p>
  
  <pre><code>&lt;svg width="0" height="0" style="position:absolute"&gt;
    &lt;defs&gt;
       //my svgs
    &lt;/defs&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Here the fiddle:
  <a href="https://jsfiddle.net/swf8rtog/" rel="nofollow">https://jsfiddle.net/swf8rtog/</a></p>
  
  <p>The plan was to import those SVGs group in inline in the body tag so that I don't need an extra request for an icon font. For multiple usage of an svg icon you can reference with <code>use xlink:href="#id_of_the_original_svg"</code>. You can see a working example on this page: <a href="http://www.chip.de/preisvergleich/" rel="nofollow">http://www.chip.de/preisvergleich/</a></p>
  
  <p>I tried to display the SVGs with CSS, gave them width, height, display: block, color, fill etc. attributes but nothing worked.</p>
  
  <p>But the paths seem to be correct. When not loading in a def group the Icons show up: <a href="https://jsfiddle.net/vtnLnsrh/" rel="nofollow">https://jsfiddle.net/vtnLnsrh/</a></p>
  
  <p>So what am I missing? Why is it not working?</p>