CODEWITHSUNDEEP
csssvg
Adam
Adam

Reputation: 29119

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>

Upvotes: 10

Views: 10550

Answers (4)

Temani Afif
Temani Afif

Reputation: 274096

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>

Upvotes: 3

Blueline
Blueline

Reputation: 408

This CSS works using an inline SVG. Using an SVG as a background image prevents changing the color with the text as well. The below matches the SVG to the height and color of the text.

.svg {
    fill: currentColor;
    line-height: 1;
    height: 1em;
    width: 1em; 
}
<h1><svg xmlns="http://www.w3.org/2000/svg" class="svg" viewBox="0 0 400 400"><path class="svg-path" d="M13 2.5a1.5 1.5 0 0 1 3 0v11a1.5 1.5 0 0 1-3 0v-11zm-1 .724c-2.067.95-4.539 1.481-7 1.656v6.237a25.222 25.222 0 0 1 1.088.085c2.053.204 4.038.668 5.912 1.56V3.224zm-8 7.841V4.934c-.68.027-1.399.043-2.008.053A2.02 2.02 0 0 0 0 7v2c0 1.106.896 1.996 1.994 2.009a68.14 68.14 0 0 1 .496.008 64 64 0 0 1 1.51.048zm1.39 1.081c.285.021.569.047.85.078l.253 1.69a1 1 0 0 1-.983 1.187h-.548a1 1 0 0 1-.916-.599l-1.314-2.48a65.81 65.81 0 0 1 1.692.064c.327.017.65.037.966.06z"/></svg> Test</h1>

Upvotes: 3

Adam
Adam

Reputation: 29119

The following matches the image and the text next to each other, however I still have to set a fixed height for the svg image.

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

Upvotes: 1

Sarabjit Singh
Sarabjit Singh

Reputation: 611

Go through it, it will work.

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

Upvotes: -1

Related Questions