Fallback for svg animation

[Corobori]

Hi,

I need to embed a svg animation in a website, the sample is here, it appears to have some difficulties on IOS devices, both Mac and iPhone. While we’re searching for the reason behind the issue I am wondering if there is a way to create a fallout to display a png on IOS devices.

[PaulOB]

@Corobori

if there is a way to create a fallout

Do you mean a fallback?

If so there are various codes around that seem to target ios and Safari but I’m not 100% sure of their reliability.

Here’s an example anyway showing how to show one of two blocks.

That works for me on Safari on the mac and ios on the iphone but use with care.

You would be better off finding out what ios and safari don’t like with your svg, Its one of those things that is simple if you test as you build but complicated on a job already done.

[Corobori]

Yes PaulOB, fallback !

It appears to work, at least on the couple of devices I tried.

We’re still struggling with the animation according to the designer who is working on this it is because “Safari does not support negative values in svg animation.”