Кнопка, содержащая SVG, имеет неожиданную высоту

У меня есть эта разметка:

<p style="background-color: #000">
    <button>
        <svg width="25px" height="25px" xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 43.42 43.42">
            <path d="M21.71,43.42A21.71,21.71,0,1,1,43.42,21.71,21.73,21.73,0,0,1,21.71,43.42ZM21.71,2A19.71,19.71,0,1,0,41.42,21.71,19.73,19.73,0,0,0,21.71,2Z" style="fill: rgb(255, 255, 255);"></path>
        </svg>
    </button>
</p>

Я хочу, чтобы кнопка была не больше 25x25 SVG, которую она содержит.

button {
  background: transparent;
  border-width: 0;
  padding: 0;
}

Ширина кнопки правильная, но вычисленная высота равна 28px, и я не могу понять, откуда взялись 3 дополнительных пикселя.

https://codepen.io/anon/pen/oyrRbM

css,

0