I work locally. I want to create an HTML page in which I include SVG elements using the tag. Inside those SVG, there are links to images.
An example of inclusion in HTML is:
<img src="files/internal/101-crazy-image-sized/max_local_loss.svg" />
An example of max_local_loss.svg SVG is:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="300px" height="300px" viewBox="0 0 1 1" version="1.1" id="svg5" xml:space="preserve"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs id="defs2" />
<g id="layer1" transform="translate(0,0)">
<image width="1" height="1" preserveAspectRatio="none" xlink:href="00/0.png" id="image113" x="0" y="0" />
<rect style="fill:none;stroke:#ff0000;stroke-width:0.0043937;stroke-dasharray:none;stroke-opacity:1" y="0.42105263157894735" x="0.42105263157894735" height="0.05263157894736842" width="0.05263157894736842" id="rect214" ></rect>
</g>
</svg>
Syntax is based on an Inkscape produced SVG. The xlink:href="00/0.png" attribute points to a file relative to the SVG, not the HTML.
If I open this file in Inkscape, both the rect and the image are dislayed. However, if I open the HTML file, only the rect element is displayed.
I expect the image to by displayed in the embedded SVG.
