Why don't use elements work in nested external SVG?

Question

I have three SVG images:

a.svg:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100">
  <rect id="FOO" width="100" height="100"/>
</svg>

b.svg:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100">
  <use xlink:href="a.svg#FOO"/>
</svg>

c.svg:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100">
  <image xlink:href="b.svg" width="100" height="100"/>
</svg>

a.svg#FOO is a black rectangle. a.svg#FOO is included in b.svg via a <use> element; b.svg is an <image> in c.svg.

When I open any of a.svg, b.svg, or c.svg in Inkscape, I see a black rectangle.
When I open them in a browser via a file:// URL, I see a black rectangle for a.svg, I get an error in the console for b.svg ("Security Error: Content at file:///home/uckelman/projects/svg_test/b.svg may not load data from file:///home/uckelman/projects/svg_test/a.svg."), and see nothing for c.svg.
When I open them in a browser via a http:// URL, I see a black rectangle for a.svg and b.svg and see nothing for c.svg.

Inkscape does what I expected (loads all the images). Loading from a file URL also does what I expected (error due to file URL access restrictions that browsers impose). Loading over HTTP does not do what I expected (same result in both Firefox 95 and Chromium 94).

Why am I not getting c.svg to show the black rectangle when loading HTTP? Should this work? If not, why not?

Why don't use elements work in nested external SVG?

0 Answers0