I'm working on a website that's using a lot of embedded SVGs instead of linking them through an <img> tag, since that speeds up loading times. Most of them are pretty simple, single-colored and don't shift. Since our logo was made as an SVG as well it's embedded into the page as HTML too.
One day Search Console started reporting a CLS issue on Desktop, but not on mobile. I tested it locally but I wasn't able to see any layout shift nor find a cause. I went ahead and tested the page with https://developers.google.com/speed/pagespeed/insights/ and https://layoutstability.rocks/ and both reported the same, a CLS on Desktop but not on mobile.
Screenshots of the tests can be found here:
PageSpeed Insights reporting the causing element
As you can see above PageSpeed Insights marked the embedded logo SVG as the cause for the ongoing layout shifts.
Above you can see how I identified the causing element.
So now I'm wondering not only about the issue with the SVG shifting around but also about the issue only happening on Desktop.
Is there an easy way to fix CLS issues with embedded SVGs? Or do I need to specify static height and width to preserve the space? I'd like to not do so since the SVG is scaling when resizing the browser width which would limit the responsiveness.
I also wasn't able to find any resources on that issue whatsoever, seems like I'm the first posting about it.
Any help appreciated! (as a reference, this is the affected page: https://hydra.bot)