У меня есть простая иконка, ничего особенного, для демонстрации это просто красный квадрат:
<?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 в этом примере имеет на моем экране высоту 12 пикселей. Если я добавлю изображение, оно будет иметь высоту 12px, как и ожидалось, но элемент div увеличивает его размер до 13px в Firefox (12.9px в Chromium).
Кажется, откуда-то доносится небольшой верхний слой. Но Firefox показывает, что заполнение в действительности равно 0.
Откуда взялся этот дополнительный рост и как я могу это исправить?