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

Question

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

Here is a sample from my SVG:

Answer 1

Another solution that worked for me is, open SVG image in any editor (Vs code or Notepad++) and replace

xlink:href="data:img/png;base64,

to

xlink:href="data:image/png;base64,

img to image.

Hope this helps if someone is still looking for it.

Answer 2

When you load an SVG into a webpage using an <img> element, the SVG has to be self-contained. It cannot link to third part resources like you are doing by linking to the PNG files. This a privacy restriction imposed by the browser.

Possible solutions are:

1. Convert your PNG to Data URI format and include them in your SVG that way.

2. Convert your blocker PNG(s) to actual SVG elements, such as a <path>.

Answer 3

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.

Answer 4

I happened to find out that Chrome [v 58.0.3029.81 (64-bit)] doesn't show the image inside svg if the image file is not located at html root directory. The .svg and the embedded .png files were placed in /images -folder, the .svg content came up right in Chrome, but not the embedded .png. When the .png was copied to (../) the html root, Chrome works.

However, Firefox [v 52.0.2 (32-bit)] seems to work fine when .svg and .png are in the same /images folder.

Edit: Actually in my case I load the svg with d3.xml(..) method for getting js handle to the actual svg elements.