如何在引导标志中添加（SVG）图标，使其与文本大小相同？

Question

我有一个简单的图标，没有花哨，为了演示，它只是一个红色方块：

<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="100" width="100">
    <path id="path835" d="M 0,0 V 100 H 100 V 0 Z" style="fill:#ff0000" />
</svg>

现在我正尝试将此图标添加到bootstrap-4徽章中：

<div class="badge badge-primary">
    <img src="square.svg" style="height: 1em">Small square
</div>

这是结果：

要进一步放大：

因此图标不够大。或更准确地说：容器太大。如果我完全删除图像，则在此示例中，div元素在屏幕上的高度为12px。如果我添加图片，图片的高度将达到预期的12px，但是div元素在Firefox中的尺寸增加到13px（在Chromium中为12.9px）。

似乎某个地方有一个轻微的填充顶部。但是Firefox显示填充实际上是0。

超高来自何处，我该如何解决？