embedding SVG in SVG

Question

I couldn't find the way how to embed two SVGs into SVG document. I need to do it with ability of code which would manipulate with both child SVG-s, and would like to have independent coordinates on both of those areas. I don't like to do it in HTML, because I consider it too limiting comparing to SVG. Many thanks!

Answer 1

An SVG document fragment consists of any number of SVG elements contained within an 'svg' element.

• Source: http://www.w3.org/TR/SVG/struct.html#NewDocument

Basically:

<svg …>
  <svg id="a" …>…</svg>
  <svg id="b" …>…</svg>
</svg>

Answer 2

<svg>
...
     <image x="..." y="..." width="..." height="..." xlink:href="path/to/your/file.svg" ></image>
...
</svg>

Answer 3

One of solution is '[parent svg] - [g] - [child svg]' structure.

<svg>
    <g transform="translate(-,-)">
        <svg>
            ...
        </svg>
    </g>
</svg>

You can set the cordinate of child svg as transform(translate) of g element.

demo:
http://hitokun-s.github.io/old/demo/path-between-two-svg.html