title: SVG gradients not getting rendered when using it from external SVG-sprite file
body: <p>The gradients only functions properly when I include the svg sprite as code in the same file which defeats the purpose of having an svg sprite in the first place. I read from a different post from 3 years ago where someone said its bugged but surely there must be a fix for this?</p>
  <p>How the sprite is formed:<code>&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; style=&quot;display:none&quot;&gt; &lt;symbol id=&quot;backpack&quot; viewBox=&quot;0 0 177.4 181.2&quot;&gt; &lt;defs&gt;(some code)&lt;/defs&gt; (some paths) &lt;/symbol&gt;&lt;/svg&gt;</code></p>
  <p>The use of the sprite in index.html</p>
  <pre><code>        &lt;svg class=&quot;nav-icon&quot; id=&quot;nav-backpack&quot;&gt;
          &lt;use href=&quot;svgNew/sprites/icons-nav-elementArt.svg#backpack&quot;&gt;&lt;/use&gt;
      &lt;/svg&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/U8oho.png" rel="nofollow noreferrer">How it renderds from external file</a></p>
  <p><a href="https://i.stack.imgur.com/5PrLz.png" rel="nofollow noreferrer">How it renders if I keep the svg sprite in the same document</a></p>