从HTML引用时，没有出现将SVG嵌入到另一个SVG中作为图像出现的情况

Question

I wasn't sure how to word it correctly for the title, but here's what is happening.

I have two SVG files within the same folder, shapes.svg and wrapper.svg

wrapper.svg references shapes.svg with an image tag

<image x="-75" y="-100" width="150" height="150" xlink:href="shapes.svg" />

Now if I view wrapper.svg within a web browser directly, I can see it rendering shapes.svg perfectly. However, if I attempt to view wrapper.svg with a HTML file which is one directory above these two files, I can see all the markup of wrapper.svg , but it does not show shapes.svg .

Within the HTML file I am simple doing

<img src="svg/wrapper.svg" style="width:150px;height:150px;" />

The folder structure is as follows

• /index.html
• /svg/wrapper.svg
• /svg/shapes.svg

I found this a bit difficult to explain, and have attempted my best to relay the problem. If anybody needs me to further clarify anything at all, please do just ask me and I will reply promptly.

Answer 1

For privacy reasons all images must be single files. You can have an image within your image but the inner image must be encoded as a data URI.

When thinking of an SVG as an image it helps to think... "If this was a raster image, could I do this".