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

Here's my image:

This is what I need.

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.

CodePudding user response：

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.

Show code snippet

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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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