title: Display svg as image from external url
body: <p>I have a Firebase storage bucket with svg files in it. The urls for each file are stored in Firestore. I am fetching the urls from firestore so I can display the svgs as images in html. I am using vanilla HTML, CSS, and JS and using UIKit for layout.</p>
  <p>What I mean by &quot;display the svgs as images&quot; is:</p>
  <ul>
  <li>I want the user to be able to right click, and click &quot;Save image as&quot;.</li>
  <li>I do NOT want my CSS to affect the svgs in any way.</li>
  <li>I do not need to manipulate the SVGs programmatically.</li>
  </ul>
  <p>I am using UIKit and have tried both of their documented methods of displaying svgs:</p>
  <p>Method 1: as an <a href="https://getuikit.com/docs/svg" rel="nofollow noreferrer">inline svg image</a></p>
  <pre><code>var source = logo.imageURL;
  
  var div = document.createElement(&quot;div&quot;);
  var img = document.createElement(&quot;img&quot;);
  img.width = 160;
  img.src = source;
  img.setAttribute(&quot;uk-svg&quot;, &quot;&quot;);
  div.appendChild(img)
  parent.appendChild(div);
  </code></pre>
  <p>This results in the ability to see the svgs on the page, but:</p>
  <ul>
  <li>You can't right click them to save them</li>
  <li>UIKit's CSS is affecting the colors (all fills are gray).</li>
  </ul>
  <p>Method 2: <a href="https://getuikit.com/docs/image#inline-svg" rel="nofollow noreferrer">lazy loading using Image component</a></p>
  <pre><code>var source = logo.imageURL;
  
  var div = document.createElement(&quot;div&quot;);
  var img = document.createElement(&quot;img&quot;);
  img.width = 160;
  img.src = source;
  img.setAttribute(&quot;uk-img&quot;, &quot;data-src:&quot; + source);
  img.setAttribute(&quot;uk-svg&quot;, &quot;&quot;);
  div.appendChild(img)
  parent.appendChild(div);
  </code></pre>
  <p>This results in the svgs showing up as blank white squares.</p>
  <p>Other tests I have done:</p>
  <p>I grabbed one of the svg files and added it to my frontend <code>/images</code> folder and hardcoded the <code>source</code> variable to use the local file. The SVGs showed up fine, and met all my criteria above, so I assume there's nothing wrong with the file itself.</p>
  <p>Any help or advice with this would be great.</p>