title: How to overlap two SVG images?
body: <p>So I have two SVG images that I've created in Photoshop. The images have all the correct dimensions to align next to one another however, when I export them out they don't overlap. Below are the two images (sorry for the sizes) :</p>
  
  <p><a href="https://i.stack.imgur.com/E8RIA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E8RIA.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/UlEql.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UlEql.png" alt="enter image description here"></a></p>
  
  <p>And I've exported them out as SVGs then placed the code within my <code>index.html</code> page. That looks like : </p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="600" height="862" viewBox="0 0 600 862"&gt;
    &lt;image xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAABQIA ..." /&gt;
  &lt;/svg&gt;
  &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="600" height="862" viewBox="0 0 600 862"&gt;
    &lt;image xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8EAAAT7CAMAAACJ ..." /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Sorry, I had to create a gist as my images are base64 encoded so they're huge :</p>
  
  <p><a href="https://gist.github.com/anonymous/65aa328bb9ceb0f20039" rel="nofollow noreferrer">full code</a></p>
  
  <p>Question: The background is transparent in Photoshop. But they overlap one another to the point one hides the other. How can I get my two SVG images to overlap one another but both be visible?</p>