Converting files from SVG to Lottie
Perhaps, you might be wondering: Why would you? What are the advantages? How to do it?
If you have these questions, you came to the right place! I'm here to tell you a bit about the why, the what and the how. 😀 But only when you are ready! So go grab your coffee and come back so we can start already! 👨🏻💻
SVG? Lottie?
Not sure what they are? Well, SVG files are Scalable Vector Graphics based on XML markup and with them, you can basically represent anything you can draw in tools like Ilustrator, with the big advantage of scaling to any preferred size without compromising quality. Read more about it here.
Lottie Library, on the other hand, is a compilation of vectors based on JSON structure. Besides allowing quality scaling, they also allow animations with the Lottie libraries by Airbnb, which natively supports all the main platforms.
Ok, so why would you?
There are a few great reasons that would make you take this decision, to use lottie files instead of other image formats, including SVG.
For a long time, if you are an Android developer, you were a bit more fortunate as SVGs were supported in the platform since Android 4.4. However, iOS developers were not that fortunate and Xcode only started fully supporting it now, in 2020 😀 (there’s a great article here if you want to know more). For web, well, it's also broadly supported and it offers great performance advantages comparing to PNG and JPG files.
Then, we go 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 basically animations that can also be static, but SVGs are, static images.
Your question:
But what if I don't wish to animate?
My answer:
😂😂 Ok, maybe, your designer didn't have the time to create that magic effect, or maybe it's just not the 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 magic is just switching a file, but not switching any logic? What if the transition can be just Magic?
Then, we go to a second great advantage using lottie files to represent your beautiful art: changing their colours in runtime 🤩
Why would that be important? Well, it's already a thing for apps and websites to have different themes, such as Dark/Light UI changes present in most platforms. What if for supporting different themes, all you need is a single file? Wouldn't it be awesome?
And here's a small example on 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 : .grayanimationView.setValueProvider(
ColorValueProvider(color.lottieColorValue),
keypath: AnimationKeypath(keypath: "layer0.Layer.Layer.Color"))
If you want to get a more detailed explanation on 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 start here. You can simply drag and drop or browse your files, and you'll get 2 versions for downloading. Just like that. 😁
After this, you can already start using it as you would any other lottie file in your apps. If you're not sure how to get started, here's some help 🤗
Time for some magic! 🧙♂️
