Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
BhanuSingh

Optmizing SVG performance for mobile device and Safari browser

Recommended Posts

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

Link to comment
Share on other sites

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.

 

  • Like 4
Link to comment
Share on other sites

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 ? 

Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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.

image.png.ab6d24bb264618d35cfc785fd7951a7a.png

 

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.

image.thumb.png.b1e4babea5fb1bed44ad8be170615f3a.png

 

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

 

get_hangouts_attachment_url?url_type=FIFE_URL&attachment_token=AOe91x10fsoxTUfXsEpvv4BHwfjXtArcWh4cU-bqKkwQFpHaJ_GdcTHQAoCH_w9MSOAhVg01e8tjwhx45a0rJKe_Dy84IKPXZcakghm_b5-9IWjH-uWMezBj-lob8edZ9wH-g3IS_wKIvTMtvTd8yQbG6keJjnS7Ol4zw0-2I-slsOPjESkcu17mvnu2wdFD1DHycpQqCjevwyH-sC2WsoaZSJKoz2RXxP6AY-Q9TZPOAtQpCuvLHDh1cqnQVFKoHH0ZcRNfdY0TuQ%3D%3D&width=2880&height=1800

 

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

Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

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.

 

image.png

 

 

  • Like 2
Link to comment
Share on other sites

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.

image.png.ab6d24bb264618d35cfc785fd7951a7a.png

 

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). 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×