csssvg

Set height of SVG to line-height?

I want to include my SVG image as an icon next to the headline:

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

The font-size of h1 is 36px and the line-heigt is 1.1.

I used the inspector tool to find that the computed height of the font is 42.3px. If I set the height of the svg to 42.px, then they do not match:

enter image description here

I also think its a bit dirty to use the inspector tool, because for different zooming level the height changed a little bit and I wanted to use svg to make sure it fits on every screen properly.

Any advice how the svg image can automatically get the height of the font and also match up with it?

Here is a snippet:

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

Solution

  • I would consider the svg as a background-image to be sure it will match the height without setting any height:

    h1 {
  padding-left: 1.8lh;
  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>