Combine multiple SVG

Question

I want to combine multiple SVGs into one. My current solution is something like this:

<svg>
    <svg>...</svg>
    <svg>...</svg>
    <svg>...</svg>
</svg>

This is very convenient, because I can use viewBox, size etc for each element individually. But when I try to edit that file with Inkscape, the elements seem to jump and change their size in a strange way.

I thought about transforming each svg into a group element, but I don't know how, because I would have to apply viewBox, size, and position (relative to the parent) manually.

Does anybody have any suggestions for doing this?

Here is an example of such a file:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1680" height="966">
    <svg  contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" id="965194" version="1.1" width="325" preserveAspectRatio="xMidYMid meet" viewBox="426 337 1031 992" height="312" x="666" y="179">
        <rect x="426" stroke-linecap="round" y="337" transform="matrix(1.0,0.0,0.0,1.0,0.0,0.0)" fill="none" width="1031" id="52872" height="992" stroke="#000000" stroke-width="10"/>
    </svg>
    <svg  contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" id="346790" version="1.1" width="150" preserveAspectRatio="xMidYMid meet" viewBox="28 58 445 470" height="159" x="760" y="257">
        <ellipse stroke-linecap="round" transform="matrix(1.0,0.0,0.0,1.0,0.0,0.0)" fill="none" rx="212.5" cx="250.5" ry="225.0" id="89340" cy="293.0" stroke="#000000" stroke-width="10"/>
    </svg>
    <svg  contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" id="342294" version="1.1" width="780" preserveAspectRatio="xMidYMid meet" viewBox="115 363 1665 1461" height="684" x="413" y="2">
        <rect x="115" stroke-linecap="round" y="363" transform="matrix(1.0,0.0,0.0,1.0,0.0,0.0)" fill="none" width="1665" id="74016" height="1461" stroke="#000000" stroke-width="10"/>
    </svg>
</svg>

Answer 1

With multiple SVG, the easiest method is to embed it as <image> and perform the transformation on this element. Easier for all browser to reproduce the exact graphic and to edit also.

Alternative is to wrap <svg> inside a <g>roup tag and perform the transform="translate(x,y) rotate(zz)" inside the <g>roup tag.