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