You're probably wondering: Why would you? What are the advantages? How can I do it?

If you have these questions, then you've come to the right place! I'm here to tell you a bit about the why, the what, and the how. 😀 But only when you're ready. So grab your coffee, come back, and then we'll start! 👨🏻‍💻

SVG? Lottie?

Not sure what they are? Well, SVG files are Scalable Vector Graphics based on XML markup. With SVGs you can basically represent anything you can draw in tools like Illustrator, with the big advantage of scaling to any preferred size without compromizing quality. Read more about them here, or learn more about how SVGs compare to raster-based formats like PNGs.

And Lottie? Well Lottie files on the other hand, are vectors based on JSON structure that aside from allowing quality scaling, also allow for animations using the Lottie libraries that natively support all the main platforms.

Ok, so why would you?

There are a few great reasons that would lead you to use Lottie files instead of other image formats like SVG.

For a long time, Android developers have been a bit more fortunate as SVGs have been supported in the platform since Android 4.4. However, iOS developers were not that fortunate, and Xcode has only just started fully supporting it now in 2020 😀 (there’s a great article here if you want to know more). As for web, well, it's also broadly supported and offers great performance advantages in contrast to PNG and JPG files.

Now, back to the question of the why, and to answer that, we should ask this:

Will it animate?

As we know already, Lottie files are animations, but they can also be static too... whereas SVGs are, well, just plain old static images.

Your question:

But what if I don't wish to animate?

My answer:

Why wouldn't you?

😂😂 Ok, so maybe, your designer hasn't had the time to sprinkle some animation magic onto the designs, or maybe it's just not a priority at this point. In any case, your users might forgive you for not making their experience magical, but for how long? 😅

What if you could prepare your app for magic, even though you can't add it right now? What if adding animation magic is just switching a file, but not switching any logic? What if the transition can be just like magic? (Excuse the pun, I couldn't help myself).

Then, we go to a second great advantage of using Lottie files to represent your beautiful art: changing their colors in runtime 🤩

Why would that be important? Well, it's already a thing for apps and websites to have different themes, such as to have Dark/Light UI changes present in most platforms. What if for supporting different themes, all you needed was a single file? Wouldn't it be awesome?

And here's a small example of how you would do it in iOS (Swift):

// log list of keypaths
// Search for ".Color"
// Use ** to replace all matches of a node
animationView?.logHierarchyKeypaths()

// Handling color based on theme
let isDarkUI = traitCollection.userInterfaceStyle == .dark
let color: UIColor = isDarkUI ? .yellow : .gray

animationView.setValueProvider(
  ColorValueProvider(color.lottieColorValue),
  keypath: AnimationKeypath(keypath: "layer0.Layer.Layer.Color"))

If you want to get a more detailed explanation of layer colors, check here. Awesome! At this point you must be excited to start using this magic, right?

Here's how to convert:

All you need to do is to get your SVG files ready and convert them here. You can simply drag and drop or browse your files, click convert, and just like that your SVG will be a Lottie. 😁

Once you're done, you can already start using it as you would any other Lottie file in your apps. If you want to learn more, here's some more detail behind the benefits of using Lottie in place of static SVGs 🤗

Time for some magic! 🧙‍