Embedding an SVG within another SVG as an Image is

2020-04-20 05:33发布

问题:

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.

回答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".



标签: html svg