Can an SVG included in HTML with an "img" tag have a link to an external image with the "image" tag?

Question

I have the following file, image.svg, along with a file bitmap.png in the same spot on a server:

<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100px" height="100px" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <image x="0" y="0" width="100px" height="100px"
         xlink:href="bitmap.png" />
</svg>

When I go directly to the image file, it includes the bitmap.png image.

When I include the image in a webpage with an <object data="image.svg"></object> tag, the bitmap.png file loads.

When I include the image in a webpage with the <img src="image.svg" /> tag, the bitmap.png does not load.

What gives?

Crucify

Answer 1

The svg itself is valid.

Some browsers don't allow external references when an svg is referenced via <img>. What you can do to get it working is to convert the png to a data URI and put that there instead, see e.g this answer for how to do that.

Problem

See also w3.org/wiki/SVG_Security and w3.org/TR/SVG/conform.html#secure-static-mode – Solidify