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.