无法完全叠加图像（背景SVG上方的图像）

Question

上下文

我正在尝试建立一个页面，显示足球运动员在整个战场上的位置。它们由衬衫图标显示，该图标由两部分组成：

• 可以定制颜色的衬衫的SVG
• 阴影的PNG，与SVG的形状完全相同

问题

在某些显示器/屏幕上，图像排成一行，而在另一些显示器/屏幕上，SVG则比PNG稍大，从外观上看，SVG看起来并不好。我正在尝试将它们准确对齐，否则效果将不起作用。

我还确保图像所占据的空间应具有相同的宽度（父图像的100％），但是在开发人员工具上查看时，背景有时比其上方的PNG略高：

如以上示例所示，高度似乎不一致，因为某些图像似乎正确对齐。这对我来说很奇怪，因为它们都有相同的CSS规则。

代码

#cont {
  height: 100%;
  width: 100%;
  text-align: center;
  color: white;
  background-color: gray;
}

ul {
  height: 25%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

li {
  list-style: none;
  display: inline-block;
  width: 18%;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  box-sizing: border-box;
  margin: 0.5em 0;
  padding: 0.25em;
}

.kit {
  width: 100%;
  background-image: url(http://bkdev.co.uk/tmp/kit-bg.svg);
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
}

<div id="cont">
  <ul>
    <li>
      <div class="kit">
        <img src="https://i.imgur.com/dEzQ5zc.png" width="100%">
      </div>J SMITH
    </li>
  </ul>
  <ul>
    <li>
      <div class="kit">
        <img src="https://i.imgur.com/dEzQ5zc.png" width="100%">
      </div>J SMITH
    </li>
    <li>
      <div class="kit">
        <img src="https://i.imgur.com/dEzQ5zc.png" width="100%">
      </div>J SMITH
    </li>
  </ul>
</div>

我如何才能使其正常工作，并确保两个图像都完全对齐？还是这是追逐野鹅？