Why is a div that wraps an svg taller than the svg?

Question

Apparently svgs are inline by default:

div {
  background-color: red;
}

svg {
  height: 100px;
  background-color: blue;
}

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

Setting display: block on the svg, it removes the extra height.

Does anyone know why this happens?