SVG to Lottie: Animated SVG for Any Platform
Convert SVG artwork and animations to Lottie JSON format — the lightweight animation format that plays natively on web, iOS, Android, and React Native.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
What Is Lottie?
Lottie is an animation format originally developed by Airbnb. It stores animations as JSON data based on After Effects keyframes.
- Lottie JSON: small animation file (typically 10–100KB for complex animations)
- Platform support: web (lottie-web), iOS (Lottie-iOS), Android (Lottie-Android), React Native (lottie-react-native)
- After Effects: design animations in AE, export with Bodymovin plugin → Lottie JSON
- SVG-based: Lottie animations use SVG rendering on the web
- Designer workflow: create SVG artwork → animate in After Effects → export Lottie
SVG to Lottie Workflow
Converting SVG artwork to Lottie involves animating in After Effects or directly modifying Lottie JSON.
- Import SVG into After Effects (File > Import): SVG layers become AE shape layers
- Animate properties: position, scale, rotation, opacity, path morphing
- Export with Bodymovin plugin: produces Lottie JSON file
- Web: lottie-web npm package plays the JSON animation
- Alternative: LottieFiles editor allows visual Lottie editing without After Effects
Frequently Asked Questions
Can I convert a static SVG to Lottie?
Yes — a static SVG can be imported into After Effects and exported as Lottie JSON, even without animation. This converts it to the Lottie format for cross-platform use.
Is Lottie better than CSS-animated SVG?
Lottie is better for complex animations designed in After Effects and for cross-platform native apps (iOS, Android). CSS-animated SVG is simpler for web-only animations and doesn't require After Effects.
Do I need After Effects to create Lottie animations?
After Effects with Bodymovin is the primary workflow. Alternatives: LottieFiles Creator, Jitter, and Haiku Animator provide Lottie export without After Effects.
What's the file size of a Lottie animation vs GIF?
Lottie is typically 60–80% smaller than equivalent GIF animations while maintaining higher quality and infinite scalability. A 500KB GIF equivalent is often 50–100KB as Lottie.
Can Lottie play on all mobile platforms?
Yes — official Lottie libraries exist for iOS (Swift), Android (Kotlin/Java), React Native, Flutter, and all major web frameworks.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free