html - SVG and parent height of svg different -

i have svg element (height: 50px;) inside of div (style not specified) in page. but, height value parent div 5px different svg.

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

i got $('#parentele').height() is 55 , $('#svgele').height() is 50. if use div element instead of svg height same. may know reason 5px difference svg case?

thanks, viji

svg elements inline elements, meant render text, space reserved underneath element (below baseline) letters descender.

you can work around in several ways:

1. change block level element:

   svg {     display: block; } 

2. float element:

   svg {     float: left; } 

3. eliminate line height of container:

   #parentele {     line-height: 0; } 

compare reference demo.