Animated SVG spinner uses excessive cpu and gpu

Question

My app uses a circular progress spinner from the material-ui package and I noticed cpu spikes whenever it was used. I couldn't really tell why it consumed so much GPU and CPU, so I set out to find another spinner I had used earlier (the example code below), as I assumed that was performing better. I was wrong: it suffered from the same issue.

Hence, I wonder how I can improve the performance of SVG spinners such as this one, as it seems to be a problem of a more general nature. This SVG uses SMIL animations, but as the linked demo shows it also happens using CSS animations (keyframes).

I have tried tricks, such as enabling a separate compositing layer using translateZ and similar stuff, but I couldn't tell any difference in the cpu usage.

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" id="spinner">

        <circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round"/>
        <circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round">
            <animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/>
            <animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/>
        </circle>
        
</svg>

Answer 1

CSS动画transform: rotate()和opacity应该会产生最高的性能和最低的CPU使用率。我认为你的SVG动画可以通过重构和重写3 +静态DOM层来实现，这些静态DOM层围绕中心旋转并且时间淡入/淡出以实现类似的效果。我不太了解SVG，但静态SVG /光栅图像产生的计算量很低。