1

I have four SVG images, and I want to join them together into a single larger image with four quadrants. Is there a way to wrap them inside parent containers such that I won't have to edit the coordinates of each individual element? Thanks.

3

Sure, put the stuff inside a group tag and move the group with transform. For example let us assume we have the following 2 SVGs:

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 184.3 184.3" style="enable-background:new 0 0 184.3 184.3;" xml:space="preserve">
    <path d="M171.3,92.1c0,43.7-35.5,79.2-79.2,79.2s-79.2-35.5-79.2-79.2s35.5-79.2,79.2-79.2S171.3,48.4,171.3,92.1z M92.1,39.1
c-29.3,0-53,23.7-53,53s23.7,53,53,53V39.1z"/>
</svg>

And the more complex one:

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 184.3 184.3" style="enable-background:new 0 0 184.3 184.3;" xml:space="preserve">
    <path d="M121.6,144.9c-2.5,0-5-0.8-7.1-2.3l-13.7-9.9c-2.6-1.9-5.6-2.9-8.8-2.9s-6.2,1-8.8,2.9l-13.7,9.9c-2.1,1.5-4.5,2.3-7.1,2.3
        c-3.9,0-7.5-1.9-9.8-5c-2.3-3.1-2.9-7-1.7-10.8l5.2-16.1c2-6.2-0.2-12.9-5.4-16.7l-13.7-9.9c-4.3-3.1-6-8.4-4.4-13.5
        s6.1-8.3,11.5-8.3h16.9c6.5,0,12.2-4.1,14.2-10.3l5.2-16.1c1.6-5.1,6.1-8.3,11.5-8.3s9.8,3.3,11.5,8.3l5.2,16.1
        c2,6.2,7.7,10.3,14.2,10.3h16.9c5.3,0,9.8,3.3,11.5,8.3s-0.1,10.4-4.4,13.5l-13.7,9.9c-5.3,3.8-7.4,10.5-5.4,16.7l5.2,16.1
        c1.2,3.7,0.6,7.7-1.7,10.8C129.2,143,125.5,144.9,121.6,144.9z M86,39.9L80.8,56c-2.8,8.5-10.7,14.2-19.6,14.2H44.3
        c-6.2,0-8.8,7.9-3.8,11.6l13.7,9.9c7.2,5.2,10.2,14.6,7.5,23l-5.2,16.1c-1.9,5.9,4.8,10.8,9.8,7.1L80,128c3.6-2.6,7.9-3.9,12.1-3.9
        c4.3,0,2.6-88.6,0-88.6C89.6,35.5,87,37,86,39.9z"/>
</svg>

While the examples are simple complexity matters not, all you need to do is isolate what is inside the <svg> and tag. Then put this inside a group g tag. Then give the g tag a translate attribute to move the whole group by width of viewport. Then you make the viewport big enough for all your image So you end up with:

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 368.6 184.3" style="enable-background:new 0 0 184.3 184.3;" xml:space="preserve">

<g>
    <path d="M171.3,92.1c0,43.7-35.5,79.2-79.2,79.2s-79.2-35.5-79.2-79.2s35.5-79.2,79.2-79.2S171.3,48.4,171.3,92.1z M92.1,39.1
        c-29.3,0-53,23.7-53,53s23.7,53,53,53V39.1z"/>
</g>
<g transform="translate(184.3)">
    <path d="M121.6,144.9c-2.5,0-5-0.8-7.1-2.3l-13.7-9.9c-2.6-1.9-5.6-2.9-8.8-2.9s-6.2,1-8.8,2.9l-13.7,9.9c-2.1,1.5-4.5,2.3-7.1,2.3
        c-3.9,0-7.5-1.9-9.8-5c-2.3-3.1-2.9-7-1.7-10.8l5.2-16.1c2-6.2-0.2-12.9-5.4-16.7l-13.7-9.9c-4.3-3.1-6-8.4-4.4-13.5
        s6.1-8.3,11.5-8.3h16.9c6.5,0,12.2-4.1,14.2-10.3l5.2-16.1c1.6-5.1,6.1-8.3,11.5-8.3s9.8,3.3,11.5,8.3l5.2,16.1
        c2,6.2,7.7,10.3,14.2,10.3h16.9c5.3,0,9.8,3.3,11.5,8.3s-0.1,10.4-4.4,13.5l-13.7,9.9c-5.3,3.8-7.4,10.5-5.4,16.7l5.2,16.1
        c1.2,3.7,0.6,7.7-1.7,10.8C129.2,143,125.5,144.9,121.6,144.9z M86,39.9L80.8,56c-2.8,8.5-10.7,14.2-19.6,14.2H44.3
        c-6.2,0-8.8,7.9-3.8,11.6l13.7,9.9c7.2,5.2,10.2,14.6,7.5,23l-5.2,16.1c-1.9,5.9,4.8,10.8,9.8,7.1L80,128c3.6-2.6,7.9-3.9,12.1-3.9
        c4.3,0,2.6-88.6,0-88.6C89.6,35.5,87,37,86,39.9z"/>
</g>
</svg>

4 images is just 2 more groups to translate.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.