title: Align SVG's left and right to create side-by-side image
body: <p>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.</p>
  
  <p>Currently I have </p>
  
  <pre><code>&lt;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;"&gt;
  
  
    &lt;!--== TUNNEL ===============================================================--&gt;
      &lt;svg id="tunnel1"
         width="50%" height="50%"
         preserveAspectRatio="xMidYMid meet"
         viewBox="-100 -100 200 200"
         visibility="hidden"&gt;
      &lt;/svg&gt;
      &lt;svg id="tunnel2"
         width="50%" height="50%"
         preserveAspectRatio="xMidYMid meet"
         viewBox="-100 -100 200 200"
         visibility="hidden"&gt;
      &lt;/svg&gt;
  &lt;/svg&gt;
  </code></pre>