title: SVG use tag outputting SVG differently
body: <p>If I copy the svg code directly into my code, the SVG appears differently than if I reference the SVG using the &quot;use&quot; tag.</p>
  <p>Why do they appear differently?</p>
  <p>(I would prefer to use the  reference method, but don't know why the background colour is added).</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-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;p&gt;Using the entire SVG code within the HTML&lt;/p&gt;
    &lt;svg width="24" height="25" viewBox="0 0 24 25" fill="none"   xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;path d="M5 9.00146L11.4697 15.4711C11.7626 15.764 12.2374 15.764 12.5303 15.4711L19 9.00146" stroke="#1E0564" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/&gt;
  &lt;/svg&gt;
  
  &lt;!-- SVG code --&gt;
  &lt;svg style="display:none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
    &lt;symbol id="chevron" viewBox="0 0 24 24"&gt;
      &lt;title&gt;Chevron&lt;/title&gt;
      &lt;desc&gt;Chevron icon&lt;/desc&gt;
      &lt;path d="M5 9.00146L11.4697 15.4711C11.7626 15.764 12.2374 15.764 12.5303 15.4711L19 9.00146" stroke="#1E0564" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/&gt;
    &lt;/symbol&gt;
  &lt;/svg&gt;
  &lt;!-- end SVG code --&gt;
  
  &lt;p&gt;Referencing SVG using &amp;lt;use href=""&amp;gt; tag&lt;/p&gt;
  &lt;svg class="useSvg"&gt;
    &lt;use href="#chevron" /&gt;
  &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>