Can I use an animated SVG for a loading icon for an App (Apple iOS)

Question

So I was designing a loading animation as a GIF to use in an iOS app. But I'm getting some issues when exporting the GIF since the icon has opacity and it is not exporting well. Then I was thinking to use a SVG instead. is this possible, to use a SVG animated for a loading icon? I currently use that animated SVG icon on a website.

Thanks!

Answer 1

The most common way to ship vectorial animations on iOS seems to be using Lottie (an Airbnb open source project).

You can use Adobe After Effect to import your animated SVG and export it to Lottie's format: http://airbnb.io/lottie/#/after-effects

Lottie will then render your animation using native iOS APIs.

Answer 2

First, check with this answer. https://stackoverflow.com/a/47468420/1058199

But if you are interested in scaleable content and want to use an SVG, here's the deal.

While we naturally expect to use an SVG file, Apple has made its support of PDF files handle vector shapes. Try creating a vector shape in your tool of choice and export it as a PDF, then assign it to a new image in an xcasset. Load it and see how it scales.

If you do have a sequence of images that you want to animate, such as image1.png, image2.png, add them to the xcasset and use animatedImageNamed:

Objective-C

UIImage *animatedImage = [UIImage animatedImageNamed:@"imgName" duration:1];

Swift

let animatedImage = UIImage.animatedImageNamed("imgName", duration: 1)

You can also use this approach. https://medium.com/swift-sundae/ultimate-guide-to-gifs-in-ios-f903ab69ddf6

Apple certainly could have made it easier for us.