If your Elementor pages contain multiple Lottie animations, you may notice performance issues, such as slow loading, laggy scrolling, or jittery animations. To address this, we’ve introduced a new option in Premium Lottie Animation widget, Premium Image Layers widget, and Premium Lottie Animations Container addon that lets you choose whether to render animations as SVG or Canvas.
This article explains the key differences between SVG vs. Canvas rendering and helps you decide which one to use for better performance.
How Lottie Animations Affect Page Performance?
Lottie animations are lightweight vector-based animations that typically load faster than GIFs or videos. However, when multiple highly detailed animations are used on a page, they can put strain on the browser and cause:
- Increase CPU usage
- Cause slow scrolling and rendering lag
- Affect other hover or scroll-based animations
To solve this, Premium Addons now allows you to optimize animations by switching between SVG and Canvas rendering based on your page’s needs.
SVG vs. Canvas Rendering: What’s the Difference?
Both SVG and Canvas rendering methods have their own advantages and limitations:
SVG Renderer (Higher Quality, Lower Performance)
- Supports all animation effects, including complex masks and layering.
- Handles scalable vector graphics, ensuring crisp quality at any size.
- May slow down performance when using large or multiple animations.
Canvas Renderer (Better Performance, Some Limitations)
- More optimized and lightweight, reducing CPU usage and improving page speed.
- Works better for pages with multiple animations.
- Does not support certain effects like stacked subtracting masks, which might alter how some animations appear.
When Should You Use SVG or Canvas Rendering?
✔ Use SVG if your animation contains advanced masking or layering effects that require full rendering accuracy.
✔ Use Canvas if you’re experiencing slow page loading or animation lag and don’t need advanced effects.
How to Switch Lottie Rendering Mode in Premium Addons
This feature is available in the following Premium Addons widgets:
Follow these steps to change the Lottie rendering mode in Premium Addons:
- Edit the page with Elementor.
- Select the Lottie Animation widget, Image Layers widget, or Lottie Animations Container addon.
- In the widget’s general settings, scroll to the Rendering Mode option.
- Choose between SVG (higher quality) or Canvas (better performance).
- Save the changes and preview your page.
