4

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

enter image description here

enter image description here

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?

web-tiki
  • 99,765
  • 32
  • 217
  • 249
pourmesomecode
  • 4,108
  • 10
  • 46
  • 87
  • 1
    Your svgs are just acting as wrappers for a couple of PNGs? If you drew the images as vectors you would be able to control stroke and fill with CSS. Otherwise you would eb better of just using the pngs... – flemcito Dec 21 '15 at 13:46
  • This will save just fine in [codepen.io](http://codepen.io/anon/pen/NxrdWx) – AntiHeadshot Dec 21 '15 at 13:51
  • @flemcito basically yeah. I've tried PNGs but they don't align next to one another. As in, one image as a bottom triangle, then the other images as the top triangle. So I though SVGs might be the way to go – pourmesomecode Dec 21 '15 at 14:01

1 Answers1

13

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>
web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • 1
    You even could use a rectangle for the lighter one, so the shape will be even less complex. – AntiHeadshot Dec 21 '15 at 13:48
  • 1
    yes @AntiHeadshot or even no element at all and use the `background` CSS property on the svg element but I think for the sake of the question, this approach is more "understandable" – web-tiki Dec 21 '15 at 13:56
  • I have a lot of different images. Based `onClick` I toggle them off and on. The background purple was just for simplicity sake and because i've not found the best images i'm using yet – pourmesomecode Dec 21 '15 at 14:05
  • I have one full image. You select a button I then have two triangle images as shown above. You then click another and it removes the bottom triangle and replaces with two smaller triangles. All of the are images are will be exported out as triangles. I'm unfamiliar SVGs so I though the only way to get two triangle images side by side was via svgs – pourmesomecode Dec 21 '15 at 14:06
  • @MeMyselfAndI I am having a hard time understanding what you want exactly. With SVG you can clip images with any shape, maybe that is what you are looking for? – web-tiki Dec 21 '15 at 14:10
  • Sorry, i'm not familiar with SVGs all that much. What you have there, but instead of the fill being colour. It being a background image. – pourmesomecode Dec 21 '15 at 14:27
  • I tried adding the background image. But it stretches my images so I opted away. I may of just been doing it wrong – pourmesomecode Dec 21 '15 at 14:28
  • 1
    @MeMyselfAndI ok, if you want to fill and SVG element (polygon, path...) you can use a pattern element. This approach is explained [here](http://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image) – web-tiki Dec 21 '15 at 14:33