How to overlap two SVG images?

Question

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

And I've exported them out as SVGs then placed the code within my index.html page. That looks like :

<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">
  <image xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAABQIA ..." />
</svg>
<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">
  <image xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8EAAAT7CAMAAACJ ..." />
</svg>

Sorry, I had to create a gist as my images are base64 encoded so they're huge :

full code

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?

Answer 1

The problem with your approach is that both shapes are in seperate svg elements. So they can't overlap with the default svg positioning. You could make them overlay with absolute, relative or fixed positioning but that would be overkill and complicated for such simple shapes. Another approach would be to export both of them in the same file BUT :

For such a simple shape, you can use an inline SVG with 2 polygon elements. Simple, much shorter and "human readable" :

svg{width:30%; height:auto;}

<svg viewbox="0 0 50 60">
  <polygon points="0 0 50 0 50 5 0 50" fill="#C000FF"/>
  <polygon points="0 50 50 5 50 60 0 60" fill="#803698"/>
</svg>