Tips for making SVG bitmap scale smoother?

[mr.x]

I know this isn't a GSAP problem, it's probably a hardware or a browser issue. TLDR, bitmaps in an SVG seem to scale less smooth than normal.

 

In the codepen, we have an image inside an SVG, and the same image in a regular div next to it. Then we apply a Tweenmax scale to both and compare the results. 

 

Maybe it's just my old Windows laptop, but the scaling is a lot less smooth when then bitmap is in an SVG than in a regular div. Throwing a clipPath on the SVG makes it even less smooth, so I've done that for maximum effect. 

 

I tried adding {force3D:true, z:0.01} to the Tween, and translate3d(0, 0, 0.1px) to the CSS, but nothing seems to affect the SVG bitmap. 

 

Any tips for getting the SVG bitmap scaling any smoother? Thanks in advance.

See the Pen rZQzxp by xgraves (@xgraves) on CodePen

[GreenSock]

Some browsers apply pixel snapping which makes scaling jerky - you can force the browser to avoid the snapping by rotating the image slightly, even like 0.1 degrees. 

 

And for the record, the SVG spec doesn't allow 3D, so setting z:0.01 doesn't do anything for you

[mr.x]

Ah, I'll try that. 

 

Thanks so much Jack! Always an honor.

[mr.x]

Wow, it worked like a charm!

 

I added {rotation:0.01} to the Tween and now the SVG scales more smoothly than DIV.

 

 

[GreenSock]

Excellent!