Jump to content
Search Community

transform scaled SVG causes blur?

retropunk test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi Patrick, 

 

It appears that on desktop, both Chrome and Safari convert SVGs to ugly bitmaps when doing scaling which seems to perform well, but look poor.

I've found that if you want to have an animation that makes an SVG bigger, its best to bring it in at its largest size and scale up from a smaller size.

 

Checkout this pen in Safari or Chrome (on Mac) and see how the svg with class ".small" gets all nasty: 

 

MlpVwQe.png

 

http://codepen.io/GreenSock/pen/ae367934459c19df7091f8803b25c7b2

 

FWIW FireFox makes both logos look nice.

 

I see you are using SVGs as background images, I haven't done much experimenting with those.

 

Hope this helps a little. 

  • Like 1
Link to comment
Share on other sites

I am simply experimenting with different build scenarios

 

When I had a bitmap that needs to be scaled I would use that trick but in SVG's case I would think it wouldn't ma e a difference.

Isn't SVG suppose to scale and look that same regardless

 

For example, I have these 2, where large is 800% larger in Illustrator

https://s3-us-west-2.amazonaws.com/s.cdpn.io/50628/map-pin.svg

https://s3-us-west-2.amazonaws.com/s.cdpn.io/50628/map-pin-large.svg

 

They both do the same thing when you transform.

At this point I think I'm at the mercy of the browser.

 

I might go back to PNG for now. I also noticed that SVG can be more processor intensive at times. It's like scaling too many vectors in Flash...I can see now why cacheAsBitmap was invented :)

Link to comment
Share on other sites

I'm in a similar boat as you with SVG. I often find myself testing simple assumptions only to be completely baffled by the results. 

 

I would have thought that up-scaling an SVG would look amazing and crisp - as we are used to vectors looking in Flash. 

You hit the nail on the head – Chrome is taking a page from the Flash playbook and doing its own version of cacheAsBitmap. 

I would prefer if this were something developers could control. 

 

I imagine some folks around here have much more experience SVG scaling than I, so maybe we will still hear some promising news. 

  • Like 2
Link to comment
Share on other sites

Hi Benoit,

 

Thank you for the demo it actually helped expose a great solution!

There is a big difference between what you are doing with GSAP and Snap.

 

Your GSAP demo is scaling the entire <svg> but your Snap demo is scaling the <g> child element.

 

When both engines scale the same element side by side, the results are pretty much identical:

 

http://codepen.io/GreenSock/pen/KpzeBy

  • Like 5
Link to comment
Share on other sites

  • 9 months later...

Hi benoit  :)

 

you can turn off tween's force3D if want to scale whole of svg tag , like this :

TweenLite.to("#star",10, {scale:10,force3D:false});

but i think that's better to go Carl's way : http://greensock.com/forums/topic/11692-transform-scaled-svg-causes-blur/?p=47666

 

Nice one. I used force3D: false and it made the blurriness go away on a large SVG map. Thank you!

Link to comment
Share on other sites

As a rule of thumb if the element you are animating is a <svg> element or a child of the <svg> element is to just set force3D:false, like Diaco suggested above. Since force3D default is "auto" and webkit based browsers will go against the SVG spec and allow hardware acceleration to be triggered.

 

Firefox will honor the spec regarding not allowing 3D transforms on SVG, since CSS 3D transforms are not supported in the SVG spec, not until SVG 2.0 comes out. That is why Firefox scales SVG nicely, since it ignores CSS 3D transforms on SVG elements based on the SVG spec.

 

Google webkit Blink (Chrome) and Apple webkit (Safari) will allow sometimes 3D transforms on SVG elements even though it is not part of the SVG spec and then later remove that non standard behavior.

 

So if you want to have consistent cross browser results than just set force3D:false on any of the SVG elements you use scale or rotation on.

 

:)

  • Like 2
Link to comment
Share on other sites

I'm not sure if this helps, but I've been using a little trick, ONLY if I have an existing SVG at a smaller size and it needs to be larger and also scale or rotate. I will scale it using CSS, then I can reduce the size using GSAP, and scale and rotate it and it will look sharp. See codePen to see what I mean: 

See the Pen WwNrrJ by celli (@celli) on CodePen

. I haven't tested it everywhere, but it seems to work as well.

  • Like 1
Link to comment
Share on other sites

Hello celli.. great tip!

 

Be careful about using z-index on SVG elements and their children. The SVG spec doesn't support the use of z-index on the <svg> element and / or it's child elements.

 

If you really need z-index support, than in that case it is better to wrap your <svg> element in a <div> tag, and animate that instead ;)

  • Like 1
Link to comment
Share on other sites

  • 3 months later...

Hi Patrick, 

 

It appears that on desktop, both Chrome and Safari convert SVGs to ugly bitmaps when doing scaling which seems to perform well, but look poor.

I've found that if you want to have an animation that makes an SVG bigger, its best to bring it in at its largest size and scale up from a smaller size.

 

Checkout this pen in Safari or Chrome (on Mac) and see how the svg with class ".small" gets all nasty: 

 

MlpVwQe.png

 

See the Pen ae367934459c19df7091f8803b25c7b2 by GreenSock (@GreenSock) on CodePen

 

FWIW FireFox makes both logos look nice.

 

I see you are using SVGs as background images, I haven't done much experimenting with those.

 

Hope this helps a little. 

 

 

Is this still the case in 2016 Carl?

 

What do you recommend?  My SVG's blur when its scaling, but once its completed its clear. So it only blurs when animating.

 

Cheers

Link to comment
Share on other sites

  • 3 months later...

Perhaps obvious, but two more considerations:

 

(1) if your svg is appended to any parent node with a subpixel position, it may cascade down to your svg causing blurriness.

(2) In chrome (at least) rotating with the default transformOrigin can lead to blurriness.  Setting transformOrigin to '0 0' and translating clears it up for me.

  • Like 2
Link to comment
Share on other sites

  • 1 month later...
  • 3 months later...

Hi benoit  :)

 

you can turn off tween's force3D if want to scale whole of svg tag , like this :

TweenLite.to("#star",10, {scale:10,force3D:false});
but i think that's better to go Carl's way : http://greensock.com/forums/topic/11692-transform-scaled-svg-causes-blur/?p=47666

 

Turning off force3D totally worked for me, thank you!!

 

I had a number of SVG elements wrapped in a <div>, and was using TimelineLite to scale the <div> back to 1 from a huge amount. This was rendering blurry af in Safari 10, and force3D fixed it  :-)

 

 

Link to comment
Share on other sites

  • 5 years later...

@flysi3000 tough to troubleshoot without a minimal demo but if you're scaling up at all and there's a 3D-related transform applied, Safari rasterizes it at "normal" (unscaled) size and then just stretches the pixels. It's totally unrelated to GSAP - it's a silly way Safari is trying to "optimize" performance via rasterizing. The only solution I know of is to make sure you set the natural size large enough. So if you're scaling to 4 (400%), you should start out at a scale of 0.25 and scale up to 1 instead (and set the width/height to 4x what they'd normally be). 

  • Thanks 1
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.
×
×
  • Create New...