Jump to content
GreenSock

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

transform scaled SVG causes blur?

Recommended Posts

Hey guys, when I use a transform like rotationY on an SVG element it appears to blur slightly. It's more obvious on retina screens.

is there a way to avoid this blur and still achieve the same transform effect?

 

Thanks!

See the Pen 5b63088badd6f874498a418647668ee5 by SnapToPixels (@SnapToPixels) on CodePen

Link to post
Share on other sites

It looks pretty clear to me it might have more to do with the hardware it's rendered on.  

Link to post
Share on other sites
yes, it is.

On desktop chrome its not as obvious as an iPhone 5 safari or chrome.

 

My question still stands

Is there a way to avoid this blur and still achieve the same transform effect?

 

Thanks
Link to post
Share on other sites

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 post
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 post
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 post
Share on other sites

This works with one Tweened element.

force3D:false doesn't always work on that element if it's part of a TimelineLite sequence.

 

Depending on the device I get mixed results.

Link to post
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 post
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 post
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 post
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 post
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 post
Share on other sites

Thank you, I didn't know that about SVG z-index. That is very helpful, since I use it a lot!

Link to post
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 post
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 post
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 post
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.

×