Установить высоту SVG на высоту строки?

Question

Я хочу включить изображение SVG в виде значка рядом с заголовком:

<h1 ><img src="icon-sell.svg" class="icon"> Verkaufen</h1>

Размер шрифта h1 равен 36px, а line-heigt равен 1.1.

Я использовал инструмент инспектора, чтобы определить, что вычисленная высота шрифта равна 42.3px. Если я установлю высоту svg на 42.px, то они не будут совпадать:

Мне также кажется немного грязным использовать инструмент инспектора, потому что для различного уровня масштабирования высота немного изменилась, и я хотел использовать svg, чтобы убедиться, что он подходит для каждого экрана должным образом.

Какой-нибудь совет, как изображение svg может автоматически получить высоту шрифта и также соответствовать ей?

Вот фрагмент:

.icon{
  height: 43.75px;
}

h1{
  font-size:36px;
  line-height:1;
}

<h1>
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f7/Bananas.svg" class="icon">
Headline
</h1>

Answer 1

Я бы рассматривал SVG как фоновое изображение, чтобы быть уверенным, что оно будет соответствовать высоте, не задавая никакой высоты:

h1 {
  line-height: 1;
  padding-left: 1.8em;
  background-size: auto 100%;
  background-repeat: no-repeat;
}

<h1 style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/f/f7/Bananas.svg)">
  Headline
</h1>

<h1 style="font-size:50px;background-image:url(https://upload.wikimedia.org/wikipedia/commons/f/f7/Bananas.svg)">
  Headline
</h1>
<h1 style="font-size:10px;background-image:url(https://upload.wikimedia.org/wikipedia/commons/f/f7/Bananas.svg)">
  Headline
</h1>

Answer 2

Следующее соответствует изображению и тексту рядом друг с другом, однако мне все еще нужно установить фиксированную высоту для изображения SVG.

  
.icon{
  height: 36px;
  display:inline-block;
  vertical-align:middle;
}

h1{
  font-size:36px;
  line-height:1.1;
  display:inline-block;
  vertical-align:middle;
}

  
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f7/Bananas.svg" class="icon">
<h1>
Headline
</h1>

Answer 3

Пройдите через это, оно будет работать.

h2{display:flex;align-item:center;}