I have an SVG image that contains a raster image, using xlink:href to point to the location of the raster image (not as a data URI). When I include this SVG image in a webpage via a standard <img /> tag, the raster image part is not displayed (the browser does not even make a request for it).
However, if I load the SVG file in the browser directly, inline it in an HTML page, or include it via an <object /> tag in an HTML page, then the raster image part displays with no problems.
Does anyone know why it won’t display when used in an <img /> tag, and if there is any way to get it working with an <img /> tag?
I don’t know the exact reason it does not work, but my guess is that you cannot do that kind of nested request from an img tag. I have not used SVGs with nested images before, but I have used SVGs with classes, to enable css selectors to alter colours for things like hover/active effects on icons. That has the same issues, the svg must be inline for it to work.
What I have done in some cases, to keep all that messy svg data out of my html and keep it as a separate standalone svg file, is to use a php include to insert the svg inline from its own separate file.
It may not be a perfect solution, but you may prefer it to having the svg as part of the html, while it still appears inline to the end user, so it’s one less http request than using img.
I’m not familiar with the ins and outs of svg but this might answer the question.
For security reasons, browsers will disable SVG scripts, linking and other types of interactivity when they’re added to your page with an img tag. In addition, IE9, Chrome and Safari won’t apply stylesheet rules to the SVG if they’re defined in a separate CSS file.