Объединение нескольких SVG

Question

Я хочу объединить несколько SVG в один. Мое текущее решение что-то вроде этого:

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

Это очень удобно, потому что я могу использовать Viewbox, размер и т.д. для каждого элемента в отдельности. Но когда я пытаюсь отредактировать этот файл с помощью Inkscape, элементы, кажется, прыгают и изменят свой размер странным образом.

Я думал о преобразовании каждого svg в элемент группы, но я не знаю, как, потому что мне пришлось бы применять viewBox, размер и позицию (относительно родителя) вручную.

У кого-нибудь есть предложения по этому поводу?

Ниже приведен пример такого файла:

<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

С несколькими SVG, самый простой способ, чтобы встроить его в качестве < изображения > и выполнять преобразование на этом элементе. Легче для всех браузеров воспроизводить точную графику и редактировать также.

альтернатива, чтобы обернуть < > SVG внутри < г > Roup тег и выполнить transform="translate(x,y) rotate(zz)" внутри < г > Roup тега.