Html 为什么嵌入式SVG会导致桌面上的CLS（累积布局移动），而不是移动设备上的CLS？

我在一个网站上工作，该网站使用了大量嵌入式SVG，而不是通过

标签链接它们，因为这样可以加快加载时间。它们大多数都很简单，颜色单一，而且不会移位。因为我们的徽标也是作为SVG制作的，所以它也作为HTML嵌入到页面中

有一天，搜索控制台开始在桌面上报告CLS问题，但在手机上没有。我在本地测试了它，但我看不到任何布局变化，也找不到原因。我继续用和测试了页面，两人都报告了相同的情况，桌面上有CLS，但手机上没有

测试的屏幕截图可在此处找到：

如上所示，PageSpeed Insights将嵌入式徽标SVG标记为当前布局变化的原因

在上面，您可以看到我是如何识别导致该事件的元素的

所以现在我想知道的不仅是SVG转换的问题，还有仅发生在桌面上的问题

有没有一种简单的方法可以通过嵌入式SVG解决CLS问题？还是需要指定静态高度和宽度以保留空间？我不想这样做，因为SVG在调整浏览器宽度时会缩放，这会限制响应能力

我也找不到关于这个问题的任何资源，似乎我是第一个发布这个问题的人

---

感谢您的帮助！（作为参考，这是受影响的页面：）

我实际上发现了这个问题，它与SVG无关，而是与webfont交换有关。从字体族堆栈中删除webfont可以解决此问题。不知道如何在没有CLS的情况下使用webfonts。

我也有同样的问题，没有webfont或其他任何东西。