SVG vs Canvas performance
I just found this great effect that uses a bunch of SVG elements that are animated. Given the size of the effect (although I'll agree is nothing too crazy) and the frequency its being updated at, I was wondering if it would've been better to use a canvas element instead.
https://replit.com/languages/go (scroll down a bit)
4 Replies
looks like they are using the SVG
transform attribute for the animation instead of CSS transforms. This is getting hardware accelerated in Chrome but not Firefox. Not sure if changing to CSS transforms would push the animation to the GPU. Don't know if Firefox just doesn't do GPU on SVG elements? Pretty sure canvas would for sure activate GPU for this in all browsers.That's actually good to know, that using canvas makes use of hardware acceleration. I would've assume canvas to be more performant but couldn't really say why. Btw, how can you tell if a particular feature is being hardware accelerated?
most browsers dev tools have repaint monitors (i think Firefox removed it??) but the easiest way I've found on windows is just to open the "Task Manager" processes tab and look to see if the GPU % goes up when the animation is active.
Simple as that, should've thought of that 😅 Thanks!