CODEWITHSUNDEEP
htmldomsvg
Viji
Viji

Reputation: 51

SVG and parent height of svg different

I have SVG element (height: 50px;) inside of div (style not specified) in page. But, the height value for parent div is 5px different from SVG. 

<div id="parentele">
    <svg id="svgele" style="height:50px"></svg>     
</div>

I got $('#parentele').height() is 55 and $('#svgele').height() is 50. If I use div element instead of SVG the height will be same. May I know the reason for 5px difference for SVG case?

Thanks, Viji

Upvotes: 5

Views: 1472

Answers (3)

Mikel
Mikel

Reputation: 391

I have other solution that worked for me. You just have to set the parent element display to flex:

#parentele {
  display: flex;
}

Only that

Upvotes: 0

Eliran Malka
Eliran Malka

Reputation: 16263

SVG elements are inline elements, which are meant to render text, so some space is reserved underneath the element (below the baseline) for the letters descender.

You can work around this in several ways:

  1. Change it to block level element:

    svg {
    display: block;
}

  2. Float the element:

    svg {
    float: left;
}

  3. Eliminate the line height of the container:

    #parentele {
    line-height: 0;
}

Compare it with the reference demo.

Upvotes: 8

tynn
tynn

Reputation: 39843

The size of the svg element is not only determined by its width and height. So for the height of the surrounding dev element, also the svg's padding, border and margin matter.

Upvotes: -1

Related Questions