Blurry SVG Element

Yes, that’s because you’ve told it to do that :wink:

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

There’s a difference though as Scale acts out of the HTML flow but Size can affect everything around or under, so you may have to rework your Positioning settings.

Note that as it is a disc, it could also be a div instead of a SVG image.

8 Likes