Html 如何将svg放在span中，并让span封装svg？

如何将svg放在span中，并让span封装svg？例如，这里我想要两个灰色背景的黑色圆圈并排。我就是不能让它工作

<span style="background: gray">               
    <svg height="100" width="100" style="display: block">
        <circle cx="50" cy="50" r="40" ></circle>
    </svg>
</span>        

<span style="background: gray">               
    <svg height="100" width="100" style="display: block">
        <circle cx="50" cy="50" r="40" ></circle>
    </svg>
</span>

---

我建议以下解决方案

---

添加CSS规则，使

显示：内联的span默认为
显示：内联块

span {
    display: inline-block;
}

为什么是span而不是div？因为我需要的结果是并排的，而不是堆叠的完美。我不知道内联块。非常感谢，是的。直到现在我还不知道内联块。非常感谢。HTML元素有人们忘记的默认值。不客气：）