Jump to content


Tips for making SVG bitmap scale smoother?

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Ah, I'll try that. 


Thanks so much Jack! Always an honor.

  • Like 1
Link to comment
Share on other sites

Wow, it worked like a charm!


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



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