9

I cannot get past 2 levels. (Tried on Iceweasel and Chromium.)

As a test, I tried a variant of the code presented in this earlier reply. This one consists of 3 separate files, where a.svg includes b.svg, and b.svg includes c.svg. (NB: This is not a cycle.)

<!-- a.svg -->
<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="-50" cy="-50" r="30" style="fill:#b58900" />
  <image x="10" y="20" width="80" height="80" xlink:href="b.svg" />
</svg>

<!-- b.svg -->
<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="-50" cy="-50" r="30" style="fill:#cb4b16" />
  <image x="10" y="20" width="80" height="80" xlink:href="c.svg" />
</svg>

<!-- c.svg -->
<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="-50" cy="-50" r="30" style="fill:#dc322f" />
</svg>

I expected to see a large dark yellow dot, a medium-sized orange dot, and a small red dot, but I see only the first two. In fact, what I see is exactly the same as what I would see if b.svg did not include c.svg.

Why is c.svg not being included?

Is there a way to get SVG recursion to work for more than 2 levels?

Community
  • 1
  • 1
kjo
  • 33,683
  • 52
  • 148
  • 265
  • I've uploaded the test files above to [a.svg](http://phrogz.net/tmp/a.svg), [b.svg](http://phrogz.net/tmp/b.svg), [c.svg](http://phrogz.net/tmp/c.svg), with the addition of colored rectangles behind each image (to show where they should be). You can use the Developer Tools of Chrome to show that `c.svg` never attempts to load. – Phrogz Mar 09 '16 at 22:19
  • If you post your use case you may get some very good recommendations on how to achieve what you're looking for. For example, you can have ``s inside other ``s and can manipulate this DOM with Javascript. – Charlie Schliesser Mar 09 '16 at 22:22

1 Answers1

10

SVG when used as an image must be complete in a single file.

  • a.svg is not an image
  • b.svg is included as an image by a.svg and is therefore subject to the complete in a single file image rule so any images it contains must be included as data URIs.
  • c.svg is ignored as b.svg cannot refer to external files.

Convert c.svg to a data URI and include it inline in b.svg to get round this.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242