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

When you load an SVG into a webpage using an 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 .