[SOLVED] Images in SVG Image tags not showing up in Chrome, but displays locally?

Images in SVG Image tags not showing up in Chrome, but displays locally?

For some reason, Chrome is displaying the SVG without the images in its Image tags.

Here is a sample from my SVG:

<image xlink:href="blocker.png" height="312.666661" width="85.693825" y="16.479997" x="459.946664"/>

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

Here is the svg tag:

<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">

Here is what it looks like locally:

https://i.sstatic.net/Ga7je.png

Here is what it looks like on a live webpage:

https://i.sstatic.net/aeNmt.png

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

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

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

<body>

<div>
    <img src="svg.svg"/>
</div>

</body>
</html>

Solution

PaulLeBeau's answer is right. But another solution is to use an embed tag instead of an img tag for the picture.

<embed src="svg.svg">

Here are some ways to embed svg images in HTML.