How to get rid of extra space below svg in div element

Solution 1:

You need display: block; on your svg.

<svg style="display: block;"></svg>

This is because inline-block elements (like <svg> and <img>) sit on the text baseline. The extra space you are seeing is the space left to accommodate character descenders (the tail on 'y', 'g' etc).

You can also use vertical-align:top if you need to keep it inline or inline-block

Solution 2:

svg is an inline element. inline elements leave white-space.

Solution:

Add display:block to svg, or make height of parent div same as svg.

DEMO here.

Solution 3:

Another alternative is add font-size: 0 to svg parent.