【发布时间】：2020-12-01 23:37:57
【问题描述】：
我正在开发一个使用大量嵌入式 SVG 的网站，而不是通过 <img> 标签链接它们，因为这会加快加载时间。它们中的大多数都非常简单，单色并且不会移位。由于我们的徽标也是作为 SVG 制作的，因此它也以 HTML 的形式嵌入到页面中。
有一天，Search Console 开始在桌面设备上报告 CLS 问题，但在移动设备上却没有。我在本地对其进行了测试，但我没有看到任何布局变化，也没有找到原因。我继续使用https://developers.google.com/speed/pagespeed/insights/ 和https://layoutstability.rocks/ 测试了该页面，并且都报告了相同的结果，即桌面上的CLS，而不是移动设备上的。
可以在此处找到测试的屏幕截图：
PageSpeed Insights reporting the causing element
正如您在上面看到的那样，PageSpeed Insights 将嵌入式徽标 SVG 标记为持续布局变化的原因。
您可以在上面看到我是如何识别导致元素的。
所以现在我想知道的不仅是 SVG 移动的问题，还有仅在桌面上发生的问题。
有没有一种简单的方法可以解决嵌入式 SVG 的 CLS 问题？还是我需要指定静态高度和宽度来保留空间？我不想这样做，因为 SVG 在调整浏览器宽度时会缩放，这会限制响应能力。
我也找不到任何关于这个问题的资源，好像我是第一个发布关于它的帖子。
任何帮助表示赞赏！ （作为参考，这是受影响的页面：https://hydra.bot）
【问题讨论】：