Align SVG's left and right to create side-by-side image

Question

I'm trying to place tunnel1 and tunnel2 right next to each other so that they show identical images side by side, and are of same size. Sorry for the beginner question, thanks.

Currently I have

<svg
     version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     style="position: fixed; width: 100%; height: 100%; margin: 0;">


  <!--== TUNNEL ===============================================================-->
    <svg id="tunnel1"
       width="50%" height="50%"
       preserveAspectRatio="xMidYMid meet"
       viewBox="-100 -100 200 200"
       visibility="hidden">
    </svg>
    <svg id="tunnel2"
       width="50%" height="50%"
       preserveAspectRatio="xMidYMid meet"
       viewBox="-100 -100 200 200"
       visibility="hidden">
    </svg>
</svg>

Answer 1

You have not provided any content for the child SVGs so it is not clear what you wanted to do exactly.

I have added some rectangles and removed the visibility="hidden" so they are visible. The only thing that remained was to position the second SVG to the right, which was easily achieved by setting x="50%".

<svg
     version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     style="position: fixed; width: 100%; height: 100%; margin: 0;">


  <!--== TUNNEL ===============================================================-->
    <svg id="tunnel1"
       width="50%" height="50%"
       preserveAspectRatio="xMidYMid meet"
       viewBox="-100 -100 200 200">
           <rect x="-100" y="-100" width="200" height="200" fill="red"/>
    </svg>
    <svg id="tunnel2"
       x="50%"
       width="50%" height="50%"
       preserveAspectRatio="xMidYMid meet"
       viewBox="-100 -100 200 200">
           <rect x="-100" y="-100" width="200" height="200" fill="green"/>
    </svg>
</svg>

This will work (the boxes will abut one another) as long as the document is taller than it is wide. If the page is wider than square, then so will the two child SVGs, because you have set their width and height to 50%.

There are two general solutions to this:

(a) give the outermost SVG a set size that is square or tall, or (b) Align the child SVGs so that they abut at the top middle point.

You achieve (b) using the preserveAspectRatio attribute. Position the left child SVG at the top right of its viewport (xMaxYMin"), and the right child SVG at the top left of its viewport (xMinYMin").

<svg
     version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     style="position: fixed; width: 100%; height: 100%; margin: 0;">


  <!--== TUNNEL ===============================================================-->
    <svg id="tunnel1"
       width="50%" height="50%"
       preserveAspectRatio="xMaxYMin meet"
       viewBox="-100 -100 200 200">
           <rect x="-100" y="-100" width="200" height="200" fill="red"/>
    </svg>
    <svg id="tunnel2"
       x="50%"
       width="50%" height="50%"
       preserveAspectRatio="xMinYMin meet"
       viewBox="-100 -100 200 200">
           <rect x="-100" y="-100" width="200" height="200" fill="green"/>
    </svg>
</svg>