Embedding an SVG document inside an SVG document, but maintaining accessibility

Question

I need to include an SVG document (actually 3) inside another SVG document for the purpose of scrolling the embedded SVG document.

I use a Batik JSVGCanvas to display it inside a Java application. Since putting that canvas into a JScrollPane and setting the size of the canvas to a very large size consumes huge amounts of memory ( JSVGCanvas doesn't seem to be any memory-efficient), I thought about reducing the visible part of the SVG by using the viewBox attribute and using SVG Scrollbars to scroll inside the document.

But it seems that embedding an SVG inside an SVG via <image> tag only imports that document as an image, not as another SVG document. Not even the <desc> or <title> tags are evaluated to provide tooltips on elements. I also need dynamic functionality in the embedded SVG (some elements must be clickable and I provide handlers for those clicks in the java application). Also I need to modify the embedded SVGs DOM on runtime. I don't have an idea how to access the embedded SVG from within Batik.

It seems that all of this is not possible. Am I misinterpreting the <image> tag? Is there another way to embed an SVG document inside another SVG document while maintaining the dynamic functionality?

What I am trying to do is something like this:

 +-------------------------------------------------------------+
 |+-----------------------------------------------------------+|
 ||                                                           ||
 ||                  upper embedded SVG                       ||
 ||                                                           ||
 |+-----------------------------------------------------------+|
 |+-----------------------------------------------------------+|
 ||                                                           ||
 ||                                                           ||
 ||                                                           ||
 ||                  lower embedded SVG                       ||
 ||                                                           ||
 ||                                                           ||
 ||                                                           ||
 ||                                                           ||
 ||                                                           ||
 |+-----------------------------------------------------------+|
 |+-----------------------------------------------------------+|
 ||<               horizontal scrollbar                      >||
 |+-----------------------------------------------------------+|
 +-------------------------------------------------------------+

The scrollbar should scroll the viewBox of the upper and the lower embedded SVG. But I still need to access those documents to modify their DOMs and the need to be dynamic (react on mouseover, click, etc.).

Answer 1

You don't need to use an <image> to embed the other SVGs. It is legal to have one <svg> inside another. For example:

<svg>
  <svg id="upper">
     ...etc...
  </svg>
  <svg id="lower" y="200px">
     ...etc...
  </svg>
</svg>

Have you tried that?