0

How do I place an SVG logo on top of an PNG image in the center of it ?

Here's my image: enter image description here

This is what I need. enter image description here

Here is my SVG file : it's the very bottom one, white. svg

Any help is appreciated. I have to build a lot of this banners with different logos on top.

Andie31
  • 305
  • 3
  • 13
  • 1
    Is it suitable to just display SVG image on top of the PNG image using HTML/CSS? Or shoud it be single media item? – Vasily Liaskovsky Oct 15 '21 at 09:30
  • hey @VasilyLiaskovsky the end result of this would be printing the banner together with the logo on top so...what option is better and easier to implement ? I just want to avoid building banners in Illustrator. – Andie31 Oct 15 '21 at 09:32
  • 1
    Use CSS position: https://developer.mozilla.org/en-US/docs/Web/CSS/position – Danny '365CSI' Engelman Oct 15 '21 at 09:36

1 Answers1

2

Here is simple example how two images can be placed on top of each other using HTML/CSS. Note using background-position-y property for choosing white logo from combined sprite.

.outer-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 413px; /* keep ratio */
  height: 66px; /* keep ratio */
  background-image: url('https://i.stack.imgur.com/GWrGs.png');
  background-size: 100%;
}

.inner-img {
  flex: 0 0 auto;
  width: 40px; /* this depends on inner shape */
  height: 40px;
  background-image: url('https://svgshare.com/i/bBX.svg');
  background-size: 40px 160px; /* keep ratio of SVG canvas */
  background-position: 0 -120px; /* display white variant */
}
<div class="outer-img"><div class="inner-img"></div></div>

If you need to produce single media item, have a look at this question.

Vasily Liaskovsky
  • 2,248
  • 1
  • 17
  • 32
  • last question, I made the background to 100 % which is (826x132) and the logo now is super small. How i'm adjusting it's size ? Spasibo ! – Andie31 Oct 15 '21 at 10:30