SVG Animations and GPU workload

[chris_hengst]

Hi there,

 

I'm using GSAP to animate inline SVG's in my iOS Cordova app. FPS Performance is alright, everything is working fine, but the energy usage of my app is enormous!

 

While debugging this issue with Xcode, I've noticed that it has to do with the SVG animations. A simple pulsing animation of an inline SVG allocates around 80% of GPU power of an iPhone X. The phone is running hot after a minute... If I switch the SVG element with a simple DIV or a canvas tag, the GPU is down to 5%.

The "force3D" property has no influence on this... To rule out that this is a bug with Cordova, I've also tested this in the native iOS Safari browser with the same result.

 

I've read the SVG Gotchas under the SVG-Tips . Sounds like there is no easy solution for this as the browser (or GPU?) calculates each frame.

 

1. Do you have any tips/ideas on this?

2. Do you think it would be better to switch to canvas if possible? I've no experience with canvas. Is it possible to use multiple (a lot) of canvas tags on one page? I'm using SVG's for icons/graphics to adjust colors at runtime.

 

Thank you for any tips!

 

[GreenSock]

Howdy @chris_hengst. Yeah, SVGs are resolution-independent which is awesome in many ways, but it also means that the browser must fabricate all the pixels based on vectors (math) and that can be CPU-intensive. That has nothing to do with GSAP, of course - it's just the nature of SVG. 

 

If you're animating the whole SVG element, have you tried just wrapping it in a <div> and animating that instead? That'd likely allow the browser to layerize that element, rasterize it, and just animate those pixels instead of having to re-rasterize things on each tick. 

 

But yes, if you're still running into graphics rendering issues, it'd probably be wise to switch to canvas or even something like PixiJS which can leverage WebGL (SUPER fast). Regardless, you can use GSAP to do all the animations. And yes, you can use as many <canvas> elements as you want. They're cheaper than SVG because the browser just sees a <canvas> as a blob of pixels wheres every SVG element and sub-element is a full-fledged DOM element that dipatches events, etc. Of course drawing stuff on <canvas> is more complex, so I recognize this isn't an easy swap-in by any means. 

 

Perhaps that <div> wrapping trick will work and keep things nice and simple. 

 

Happy tweening!

[chris_hengst]

? Thank you! I was animating a <g> tag inside of the SVG tag. As I animate the <div> containing the SVG, I do get the same result with much lower GPU usage! I will optimize it this way! Thanks again!