Blurry SVG when symbol rotation


I’m creating an animation with SVG symbols copied and pasted from Illustrator. They aren’t re-scaled in Hype, but when I create the animation, for example a 360 ° rotation, they become slightly blurred during the transition.

Any trick or idea about it?

Thank you!

3D rotations do scaling of the bitmap and won’t re-render a SVG, so this can give a blurry effect if it is magnified. I’m surprised it is noticeable from just a 3D rotation; you’re welcome to send the file.

The general workaround I would recommend is that you can increase the width/height via the placement control, and then decrease the size back with the scale controls. When a 3D rotation is applied it should base it off of the larger width/height from before the scale.


Hi Jonathan,

Thank you so much for your answer.

In fact it’s a simple 2D animation:

Look at the palms of the hands and the rotating polygons. When the arms are completely horizontal, the palm hands lines are clearly sharpened, but when they follow the rotation, they become blurred.

Maybe this is normal, but if there’s any way to fix this would be great.

Thanks again!

Personally it is hard to tell the difference :slight_smile:, I did a small test case on rotating to see this better, and I think what you’ll want is to uncheck Use WebKit graphics acceleration in the Document Inspector. It looks like this mode renders SVGs better with rotation transformations.

I’ve tried to uncheck wga but the problem persists. Maybe the problem is in the vector file created in Illustrator. Anyway don’t worry, it is a minor problem and it is not worth investing more time.

Thanks a lot!