Canva, a leading visual communication platform, is a household name among creators, marketers, designers, students, and more, with millions of users worldwide. It empowers users to create stunning visual content with a user-friendly interface and a vast library of templates and design elements. As Canva continues to innovate, enhancing the performance and efficiency of its rendering pipeline becomes crucial. This is where ThorVG, an open-source vector graphics library, plays a pivotal role.
The power of ThorVG
ThorVG is an open-source vector graphics library designed for high-performance rendering. It offers a lightweight and versatile solution for applications requiring high-quality vector graphics, motion graphics, and animations, such as Lottie. ThorVG excels in handling complex vector-based graphics operations with robust and efficient rendering capabilities. Its notable performance advantages, particularly in memory efficiency, size, and speed, make it an ideal choice for a wide range of devices.
Canva's initial setup and challenges
Initially, Canva utilized rLottie, a C++ library for rendering vector-based animations, to render Lottie animations on iOS devices, across their video export and playback pipelines. This setup worked well for simple use cases. Canva expanded its features to support users to import Lottie animations directly into their designs. This increased the workload on the rendering pipeline, which was primarily used to generate GIFs and MP4 videos.
As the volume of Lottie animations grew, Canva began to experience significant performance issues with rLottie. The tool suffered from a lack of maintenance, leading to increased error rates and inefficiencies in performance. It became clear that Lottie could not keep up with Canva's evolving needs.
On the web platform, Canva uses Airbnb’s Lottie Web renderer within a headless Chrome instance for rendering each frame of a Lottie. While this is functional, this approach is too resource-intensive and not feasible for on-device rendering due to memory constraints on mobile devices. Therefore, a more efficient and scalable solution was required.
Transition to ThorVG
With increasing performance issues and maintenance challenges, Canva began exploring alternative libraries. ThorVG emerged as a promising candidate due to its high performance, active maintenance, and support for per-frame rendering, which was crucial for Canva's video export functionality.
The decision to adopt ThorVG was driven by several factors:
Performance Improvement: ThorVG offered significant speed and memory efficiency improvements over rLottie.
Active Development: Continuous updates and support from the ThorVG community ensured reliability and access to new features.
Technical Compatibility: ThorVG's ability to render frames efficiently and its compatibility with Canva’s existing infrastructure made it an ideal choice.
Implementation Process
Canva's iOS team led the integration of ThorVG into their iOS video rendering pipeline. The primary challenge was bridging the C++ based ThorVG API with Swift, the programming language used for Canva's iOS app. Although Apple provides interoperability tools for C APIs, complex macros and specific functionalities require a custom solution. The team tackled this by creating a dedicated Swift Package that wrapped the ThorVG C API, enabling seamless integration with the iOS app's codebase.
Another critical aspect was efficiently managing rendering buffers. Canva leveraged ThorVG's capability to render directly into a buffer, which could be shared with the company's Metal-based iOS video compositor. This approach ensured optimal resource usage and minimized unnecessary data transfers, contributing to the overall performance gains.
The implementation involved:
Creating a Swift Package: The team developed a Swift package to wrap the ThorVG C API, enabling seamless integration with the iOS app.
Buffer Management: Utilizing ThorVG’s capability to render into a buffer, which could then be shared with Canva’s Metal-based iOS video compositor, ensuring efficient resource usage.
Performance Testing and Optimization: Extensive testing was conducted to ensure the new implementation met Canva's performance and memory usage requirements.
Benchmark Testing
To quantify the benefits of switching to ThorVG, Canva conducted benchmark tests comparing the performance of rLottie and ThorVG in their iOS video export pipeline. The results were compelling, across a 1-min video design containing only Lottie elements:
These results translated to approximately an 80% improvement in rendering speed and a 70% reduction in peak memory usage. Such significant improvements affirmed Canva's decision to adopt ThorVG and underscored its advantages in performance and efficiency.
Additional Benefits
Beyond performance improvements, Canva also experienced a significant reduction in overall Lottie loading and rendering errors due to ThorVG's increased support for various Lottie variants compared to rLottie. This enhancement has contributed to a more reliable and robust rendering pipeline, improving the overall user experience and reducing potential frustrations caused by rendering failures.
Furthermore, ThorVG's active development and community support ensure that Canva can benefit from ongoing updates, bug fixes, and new features, future-proofing their investment and enabling continued innovation in their rendering capabilities.
Conclusion
The adoption of ThorVG has been a transformative move for Canva, addressing critical performance bottlenecks and enhancing the user experience. This case study showcases ThorVG's capabilities and impact on Canva's rendering infrastructure, solidifying the library as a powerful tool and high-performing rendering engine for Lottie.
Emboldened by the success of the iOS platform, Canva is actively exploring opportunities to extend ThorVG integration to other platforms.For more information on ThorVG and to explore its capabilities, visit the ThorVG GitHub repository.
