SVG Scaling Issue

[JackDL (Jack Frost)]

Hello,

We are building anew site for a client and have run into an issue with SVG scaling.

We are animation a section where a " / " animates from a small size and grows to become full screen. In the web builder the SVG scales great, but when we publish it looks like the SVG is a PNG (making awful artifacts that should not happen with SVG) It is animated using Web flows animation tools and I am stumped on how to fix this! (it happens on both Safari and Chrome) but does not happen in the website builder.

Thanks for your help!

Here is a link to see the animation:
https://xo-edge.webflow.io/pre-launch

Jack

---

Here is my public share link: LINK
(how to access public share link)

[Matthew]

Hello Jack,

I made an entire site with svg scaling and I never found how to fix it. How about you ?

[JackDL (Jack Frost)]

Hello,

Unfortunately still never found a way to fix this.

Ended up hiding the issues with extra SVG layers…

[piotr_k (Piotr)]

Hi, the answer is:

Blurry SVG Element

Yes, that’s because you’ve told it to do that In your IX Animation, you’re using a Transform Scale Action. Transform Scale takes what’s rendered on the screen and scales it. It’s like it was taking a bitmap picture of your vector element, and scale it up. So it naturally blurs, what you see on screen is a small SVG, enlarged, not a grown SVG. Instead of using transform Scale you can use Size, and try that on the SVG. The IX will modify its size and it will be re-rendered to keep its sh…