为什么包装 svg 的 div 比 svg 高？

Question

显然 svgs 默认是内联的：

div {
  background-color: red;
}

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

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

display: block在 svg 上设置，它删除了额外的高度。

有谁知道为什么会这样？