How To Overlap Two SVG Images?

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.

Solution 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>