: Joining together multiple SVG images 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

@Kimberly620

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:



<?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:



<?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:



<?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.

Vote Up Vote Down