What’s the point in converting an SVG to Lottie?

Building a solution can be a very involved and arduous process; from ideation, to design and ultimately to the end product, which could run on iOS, Android, the web and more. This often means a near-complete duplication of assets to accommodate these platforms.

For instance, the way vector graphics are handled on iOS and Android are vastly different. Neither of them support SVGs natively - which means depending on third-party support, often leading to inconsistent behavior when it comes to rendering. For Android, this means converting the exported assets to Android Vector Drawables. This conversion however can lead to issues as design tools usually don’t export to the format directly, and not all SVG features are supported. Projects such as Uber’s Cyborg attempt to patch this problem by bringing Android Vector Drawables to iOS.

Looking at Lottie, we realized we’d been staring at the solution to this problem in the face the whole time. A single format, supported across all these platforms, and a lot of the benefits that make Lottie animations so accessible and easy to use can also be applied to a Lottie in the form of static vector images/illustrations.

Using Lottie as a static asset, means you can already be sure it will work on the web and both mobile device types. It would all be read the exact same way a Lottie animation would be, the only difference, it wouldn’t move. With Lottie assets would only have to be created once but could be implemented in both iOS and Android.

This single asset can then be shared with your dev team without the need to further alter them to fit into the platform. This alone cuts out at least two problems from the get-go - the need to decide on formats, and the process of adapting asset formats specific to the platforms.

Adding in the Lottie player would be essential to render the converted images, but once built in, everything else should fall nicely into place. Given the popularity of Lottie, there’s a good chance that your project already has the dependencies in place. All that’s needed would be to implement Lottie the same as you would for an animated Lottie, but disable the autoplay. Additionally, Lottie handles loading and caching remote assets for you. This solves yet another problem - swapping out multiple project dependencies in favor of one.

Having assets in this format would also allow for dynamic changes to be much easier, making things like dark mode a little less painful to implement. Read how to convert files from SVG to Lottie here, or learn more about the differences between Lottie, SVG and PNG file formats.

To take things a little further, we’re also releasing tools that can take your existing assets and convert them to the Lottie format. At LottieFiles, we’ve done the heavy lifting so you don’t have to, by building a tool that converts SVG to Lottie.

Try it out today.