別在網頁上放 SVG 動圖了

一直在想怎麼解決網頁上 SVG 動圖高耗電的問題，找了老半天看到一堆 bug report 就是沒看到解決方案，因此認定為無解，不該用。

GSAP/Firefox/Stackoverflow/Microsoft Azure 十幾個 report 但是沒有任何地方有解決方案，而且這無關 SVG 複雜度也無關渲染範圍大小，只要用了網頁就是超級耗電，我在 Mac Firefox 測試可以看到 SVG 會用 GPU 算，GPU process 功耗直接衝到 10 幾瓦，這只是單 process，還不是完整的晶片功耗，甚至只是一張 SVG 而已，直接放影片功耗都沒這麼高。

解決方法有幾種，換成影片，換成純 CSS 實現，換成 webp 動圖，就這樣，不要再浪費生命解決 SVG 問題了，2018 到現在 2026 仍舊無解，只有那種不會再重複的一次性動畫可以放。

還找到 https://loading.io/background/ 這種專門放 SVG 動圖的網站想說有沒有優化，結果他們也沒轍，這個網頁開了功耗也是 10 幾瓦，沒救。