Images in SVG Image tags not showing up in Chrome, but displays locally?
<p>For some reason, Chrome is displaying the SVG without the images in its Image tags.</p>

<p>Here is a sample from my SVG: </p>

<pre><code>&lt;image xlink:href="blocker.png" height="312.666661" width="85.693825" y="16.479997" x="459.946664"/&gt;
</code></pre>

<p>blocker.png is a local file, but I also tried uploading it to imgur, but that didn't work either.</p>

<p>Here is the svg tag:</p>

<pre><code>&lt;svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
</code></pre>

<p>Here is what it looks like locally:</p>

<p><a href="https://i.imgur.com/BDP8KpG.png" rel="noreferrer">http://i.imgur.com/BDP8KpG.png</a></p>

<p>Here is what it looks like on a live webpage:</p>

<p><a href="https://i.imgur.com/KVuxLI1.png" rel="noreferrer">http://i.imgur.com/KVuxLI1.png</a></p>

<p>As you can see, the two players are missing. This doesn't happen when I upload the SVG online, but when I try to link that URL to my page, the same thing happens</p>

<p>Not sure if it's relevant, but here is the HTML code for the page:</p>

<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;SVG&lt;/title&gt; 
&lt;style&gt;
img{
    width: 100%;
    height:auto;
    max-width: 800px;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;div&gt;
    &lt;img src="svg.svg"/&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>