transform scaled SVG causes blur?

[retropunk 128 Likes (Specialist)]

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

[jimeast 26 Likes (Newbie)]

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

[retropunk 128 Likes (Specialist)]

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

[Carl 9,887 Likes (Superhero)]

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: 

 

 

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. 

[retropunk 128 Likes (Specialist)]

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

[Carl 9,887 Likes (Superhero)]

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. 

[benoit 39 Likes (Newbie)]

I have the same problem :

See the Pen NqNpXW by benoitwimart (@benoitwimart) on CodePen

SVG looks better with Snap with a `transform="matrix(10,0,0,10,-120.55,-90.85)"`

See the Pen EjKWRw by benoitwimart (@benoitwimart) on CodePen

 

Is it possible to do this with GSAP ?

[Diaco 1,973 Likes (Superhero)]

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

[retropunk 128 Likes (Specialist)]

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.

[Carl 9,887 Likes (Superhero)]

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

[Maelfyn 39 Likes (Newbie)]

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!

[Jonathan 5,325 Likes (Superhero)]

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.

 

[celli 77 Likes (Contributor)]

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.

[Jonathan 5,325 Likes (Superhero)]

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

[celli 77 Likes (Contributor)]

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

[gorelegacy 3 Likes (Newbie)]

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: 

 

 

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

[erikb 28 Likes (Newbie)]

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.

[Jonathan 5,325 Likes (Superhero)]

gorelegacy, if you are seeing that in Chrome on a background-image that is a webkit chrome bug.. more info in this thread

 

http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/

http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/page-3

 

[dada78 35 Likes (Newbie)]

I played around with this Carl's example above and even though I am doing the exact animation, the box-2 appears crisp, where as the box-1 appears blurry. Any ideas why that is?

 

Codepen here: 

See the Pen 018fa7fb20db08056985b6d4ad8e90a9 by dada78 (@dada78) on CodePen

 

Thanks!

[andyranged 0 Likes (Newbie)]

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