title: How to overlap two SVG vectors without using inline SVG?
body: <p>I have two SVG vectors that I have overlapped by using CSS. See <a href="http://codepen.io/xachu4u/pen/qNqLpK" rel="nofollow noreferrer">here</a>. The shapes are as follows: </p>
  
  <pre><code>  &lt;svg id="path1" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px"   &gt;
      &lt;path
         id="path120"
         d="m273 82c-8.5 0.3-15 0.7-14.5 0.9 0.6 0.2 1.8 0.2 2.9 0.1 1.2-0.1 1.6 0.2 1 1.1-0.5 0.9-0.2 1 0.9 0.6 0.9-0.3 2.7-0.2 3.9 0.3 2.1 0.8 2.2 0.9 0.3 1.1-1.1 0.1-2.6 0.1-3.2 0-1.8-0.3-1.6 1.4 0.4 3 1.1 1 1.4 1 0.9 0.1-0.5-0.8 0.1-1.2 1.8-1.2 1.6 0 2.6-0.6 2.6-1.4 0-1 1.2-1.3 4.7-1 5.6 0.4 8.1-0.9 3.3-1.7-2.6-0.5-1.8-0.6 3-0.7 3.6 0 7 0.4 7.7 0.9 0.6 0.6 1.4 0.6 1.7 0.1s2.5-0.7 4.9-0.6c3.2 0.2 4.4-0.1 4.4-1.2 0-0.8-0.7-1.4-1.4-1.4-0.9 0-1.1 0.5-0.7 1.2 0.5 0.9 0.2 0.9-0.9-0.1-1.3-1-1.7-1-1.7-0.1 0 1-0.4 1-1.6-0.1-1.3-1-1.7-1-2.5 0.2-0.6 0.9-1.2 1-1.6 0.4-0.5-0.6-6.5-0.8-16.3-0.5zm-2.3 1.6c-0.3 0.3-1.2 0.4-1.9 0.1-0.8-0.3-0.5-0.6 0.6-0.6 1.1-0.1 1.7 0.2 1.3 0.5z" /&gt;
  
     &lt;/svg&gt;
  
    &lt;svg id="path2" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px" &gt;
      &lt;path
         id="path126"
         d="m230 83.1c-4.7 0.3-8 0.6-7.5 0.7 0.6 0.2 0.2 0.7-0.8 1.3-0.9 0.6-2.6 0.8-3.6 0.4-1.1-0.3-2.2-0.2-2.5 0.4-0.6 0.9-10.2 2.7-12.1 2.2s-20.6 0.8-21.4 1.5c-0.2 0.1 8 0.3 18.1 0.3s19.2 0.3 20.1 0.7c1 0.3 1.7 0.1 1.7-0.5s1.5-1.1 3.3-1.2c1.7 0 4.1-0.5 5.2-1 1.5-0.7 1.2-0.8-1.5-0.4-7.1 1.1-15.6 1.5-13 0.6 1.4-0.5 3.7-0.9 5.3-1 1.5-0.1 2.7-0.7 2.7-1.4 0-0.9 2.5-1.2 8.9-1.2 4.9 0 9.3 0.3 9.7 0.7 0.4 0.5-0.4 0.8-1.9 0.8-1.4 0-2.8 0.4-3.1 0.8-0.9 1.5 5.3 0 6.6-1.6 1-1.2 1-1.4 0.1-0.8-0.7 0.4-1.3 0.2-1.3-0.3 0-1.3 1.7-1.4 2.4-0.2 0.4 0.5 1.4 0.8 2.4 0.6 0.9-0.2 2.7-0.4 4-0.4 1.2-0.1 2.2-0.5 2.2-1 0-1-9.9-1-24 0z" /&gt;
  
     &lt;/svg&gt;
  </code></pre>
  
  <p>If I change the CSS by removing the <code>position:absolute</code> (check the following), then they become two separate shapes. They don't overlap (stay adjacent in this case) anymore.</p>
  
  <pre><code>* {
      /* position: absolute; */
  }
      #path1{
      margin: 10px;
      padding: 50px;
      border: 1px solid;
  }
  
  #path2{
      margin: 10px;
      padding: 50px;
      border: 1px solid red;
  }
  </code></pre>
  
  <p>In this question: <a href="https://stackoverflow.com/questions/34397065/how-to-overlap-two-svg-images">How to overlap two SVG images?</a> , it says CSS is one solution or I could use them both inside a single SVG tag (inline SVG).</p>
  
  <ol>
  <li>I can't use CSS; because I need to place the shapes in another HTML page. There if I keep <code>position: absolute</code>, it creates all sorts of mess as you can imagine.</li>
  <li>I can't use inline SVG; because I am trying to animate the shapes using <a href="https://github.com/maxwellito/vivus" rel="nofollow noreferrer">Vivus</a>. This JS library requires both shapes to be inside a separate SVG tag. So I need to keep the shapes in two different SVG tags to make them animate separately. </li>
  </ol>
  
  <p>Is there any other genius hack to this problem? 
  (Without CSS or inline SVG)</p>