Optmizing SVG performance for mobile device and Safari browser

[BhanuSingh 1 Likes (Newbie)]

Hey folks,

 

I have created this animation usign ScrollTrigger which  work perfectly fine, but I am having trouble making its performance better for mobile device. No the SVG I am using is of 350kb apprx. I tried to add it on a canvas but couldn't make it work. It beacme blurry when it was rendered on a canvas.

 

I read a lot of threads.

https://greensock.com/forums/topic/15292-performance-on-large-complex-svg/

https://greensock.com/forums/topic/26704-improving-performance-of-svg-scale-on-scroll/

 

But wasn't actually able to make the performance better.

 

Also i am not even scaling my svg to a crazy number, its just 33x of its orignal size. 

 

I also tried with PNG, tho working fine on desktop but its a nightmare on mobile devices ? What's the issue with my SVG ?

See the Pen gOWreJP by bhanusinghR (@bhanusinghR) on CodePen

[mikel 4,769 Likes (Superhero)]

Hey @BhanuSingh

 

Have you tried inline Scalable Vector Graphics?

 

See the Pen 8ca55a8da56dc3f6e6cae793864b2eb2 by mikeK (@mikeK) on CodePen

 

Happy scaling ...

Mikel

 

[OSUblake 18,454 Likes (Superhero)]

2 hours ago, BhanuSingh said:

I tried to add it on a canvas but couldn't make it work. It beacme blurry when it was rendered on a canvas.

 

Sounds like you're just using the SVG as an image in canvas. You have to draw the paths in canvas and scale the context, although I doubt you're going to get a huge performance gain. It will probably be faster, but not like 100x. WebGL might be a better an option.

 

See the Pen WzbKLQ by osublake (@osublake) on CodePen

 

2 hours ago, BhanuSingh said:

 

Also i am not even scaling my svg to a crazy number, its just 33x of its orignal size. 

 

Yeah, that's huge. You screen is raster. Think about how many pixels it has to calculate and how much memory that is going to use.

 

 

2 hours ago, BhanuSingh said:

I also tried with PNG, tho working fine on desktop but its a nightmare on mobile devices ? What's the issue with my SVG ?

 

There is no silver bullet when it comes to mobile. Sometimes they just don't have to the power to do what you want. You might have to make concessions and rethink your animation or don't enable it for mobile devices.

 

[BhanuSingh 1 Likes (Newbie)]

14 hours ago, mikel said:

Have you tried inline Scalable Vector Graphics?

 

Hey @mikel, this actually worked. The animation is very smooth with inlince scalable vectors.

 

See the Pen gOWreJP by bhanusinghR (@bhanusinghR) on CodePen

 

There is one thing that has not beein fixed and is only an issue for safari browser. Safari is making the SVG go blurry until and unless the animation stops. User has to wait for a bit for it to get clear. It seems like it is loading or processing it. As the google chrome on the same machine is pretty easily handling the scaling.

 

What should I do to solve this issue ? 

[GreenSock 17,899 Likes (Superhero)]

That sounds like the browser layerizing the element during the transform because GSAP automatically helps boost performance by using 3D values in the transform (force3D: "auto") and then switches to 2D at the end. Again, that's to automatically boost performance in most browsers. The browser rasterizes the element at its native size and basically scales/stretches those pixels. Two possible solutions: 

1. Disable the automatic 3D boost default:

   gsap.config({force3D: false});

    

2. Make the native size of your element significantly bigger so that when the browser rasterizes it, more pixels are used. Of course the down side is it'll take longer to calculate all those pixels and it'll use more memory. There's no silver bullet

I hope that helps. 

[BhanuSingh 1 Likes (Newbie)]

On 7/8/2021 at 11:10 AM, GreenSock said:

That sounds like the browser layerizing the element during the transform because GSAP automatically helps boost performance by using 3D values in the transform (force3D: "auto") and then switches to 2D at the end. Again, that's to automatically boost performance in most browsers. The browser rasterizes the element at its native size and basically scales/stretches those pixels. Two possible solutions: 

1. Disable the automatic 3D boost default:

   
   gsap.config({force3D: false});

    

2. Make the native size of your element significantly bigger so that when the browser rasterizes it, more pixels are used. Of course the down side is it'll take longer to calculate all those pixels and it'll use more memory. There's no silver bullet

I hope that helps. 

 

Hey @GreenSock, thanks  for the reply.

 

I tried both the adivces.

 

1. When I tried disabling force3D the blurriness was gone, but the animation was way to gittery. 

2. I did increased the svg size considerably large. But no help.

 This is Size for my AI that I used.

 

Now all the issue is with apple devices. It is running very smooth on windows Chrome/Firefox. No frame drops nothing.

Performance Tab in chrome.

 

But when I test the same on apple chrome, I can see frame drops.

 

 

You can see the red lines indicating frame drops. The link for the animation is : https://agency.krenovate.com/storybook/lacadives/

[Cassie 4,883 Likes (Superhero)]

Hey there @BhanuSingh

Performance audits are quite time-intensive and optimization is a huge topic. 

We try to keep these forums focused on GSAP-specific questions - I'm afraid we don't have the resources to provide free performance audits and consulting.

One thing that springs to mind is maybe optimising your SVG so that the file is smaller and potentially scaling the containing div instead of the SVG itself? I know SVG elements aren't hardware accelerated in some browsers - I'm not sure if this extends to the *whole* SVG or not though?

[OSUblake 18,454 Likes (Superhero)]

56 minutes ago, Cassie said:

One thing that springs to mind is maybe optimising your SVG so that the file is smaller and potentially scaling the containing div instead of the SVG itself? I know SVG elements aren't hardware accelerated in some browsers - I'm not sure if this extends to the *whole* SVG or not though?

 

File size just makes stuff load faster. The browser still has to convert the SVG to a raster image. But the real problem is scaling. Because SVGs are supposed to appear smooth at any scale, the browser cannot optimize scaling, and must recalculate every pixel.

 

View from the Layers panel in the dev tools. That's a lot of pixels.

 

 

 

[GreenSock 17,899 Likes (Superhero)]

2 hours ago, BhanuSingh said:

2. I did increased the svg size considerably large. But no help.

 This is Size for my AI that I used.

 

It has nothing to do with the SVG artwork itself. It's about making its native size IN THE BROWSER much larger. For example, you can use exactly the same SVG but set its width/height in the browser to be 2000px instead of 200px so that the browser rasterizes at that much larger size before it applies transforms to it (stretching/squishing that raster version).