Embedding SVG in SVG

Question

I could not find a way to embed two SVGs in an SVG document. I need to do this with the possibility of code that will manipulate both child SVG-s and independent coordinates on both of these areas. I do not like to do this in HTML, because I find it too restrictive compared to SVG. Thank you very much!

Answer 1

A fragment of an SVG document consists of any number of SVG elements contained in 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 solution is the structure of [parent svg] - [g] - [child svg].

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

You can set the sinal of the child svg as a translation of the g element.

demo:
http://hitokun-s.imtqy.com/demo/path-between-two-svg.html