SVG within HTML does not show embeded images

I have a bit of code something like the following showing an svg image on my site.

<a href="http://site.com/path/to/file.svg">
<img src="http://site.com/path/to/file.svg">
</a>

The svg file is something like the following:

<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>
        <title>Annotation</title>
        <image xlink:href="http://site.com/path/to/image.jpg" id="svg_1" height="400" width="600" y="0" x="0"/>
    </g>
    <g>
        <title>Layer 1</title>
        <g id="svg_2"/>
            <path fill="none" stroke="#000000" stroke-width="3" id="svg_3".....
            <line id="svg_4" y2="249" x2="134" y1="248" x1="155" stroke-width="3" stroke="#000000" fill="none"/>
            <path d="m97,177c0,-1 -0.292892,-1.292892 -1,-2c-0.707108,-0.707108......
        </g>
</svg>

The svg is loading (via php with the correct headers etc) and can see the lines and objects in the svg, but not the image.

If I right click and open the link in a new windo开发者_StackOverflow中文版w i can see the background image. If i then switch back to the first tab where the svg link is in html the image is showing.

It seems like the browser is not loading up the image, so i tried various things like loading <img src="http://site.com/path/to/image.jpg"/> next to it. the plain image works but the one in the svg still wont show.

It would be good to avoid things like iframe as setting the size on the img tag and the whole svg scaling is good (unless you can do this in an iframe?)

Any pointers will be greatly appreciated.

TL;DR

images in svg dont show till you open it in a second tab without html around it

---

SVG <img> tags are a subset of the SVG standard. This is so that they behave as close as possible to other image types. For example, SVG files can run JavaScript. If a user was to upload SVG image to an image sharing site, it is unexpected behavior to allow images displayed with the otherwise safe <img> tag to run arbitrary JavaScript. The same also goes with other behaviors such as loading external resources. If you want the full behavior, then you can inline your SVG image or use the <object> tag.