SVG Animation with After Effects and Lottie
After Effects + the Bodymovin plugin is the standard pipeline for creating lightweight, SVG-based Lottie animations for web and mobile.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
The After Effects → Lottie → SVG Pipeline
Lottie exports After Effects animations as JSON files that render as SVG in browsers.
- Design SVG assets in Illustrator or Figma
- Import SVG into After Effects as a composition
- Animate: keyframe position, scale, rotation, opacity on SVG layers
- Export: File > Export > Add to Adobe Media Encoder Queue, or use Bodymovin plugin (free)
- Deliver: Lottie JSON renders as smooth CSS-animated SVG at any size
Importing SVG into After Effects
Import SVG files as Illustrator layers for full animation control.
- File > Import > File → select .ai or .svg (export SVG as AI from Illustrator first)
- Choose 'Composition – Retain Layer Sizes' to preserve SVG structure
- Each SVG layer becomes an After Effects layer — keyframe each independently
- Convert shapes: Layer > Create Shapes from Vector Layer (convert AI paths to AE shapes for native shape control)
- Shape layers animate better than imported vector layers
Frequently Asked Questions
Can After Effects export SVG directly?
After Effects exports SVG animations via the Bodymovin/LottieFiles plugin as Lottie JSON, which renders as SVG in browsers. Direct SVG sequence export is not practical for web delivery.
What is Lottie and how does it relate to SVG?
Lottie is an animation format (JSON) that describes SVG animations created in After Effects. The Lottie player library renders Lottie JSON as CSS-animated SVG in browsers and apps.
What's the best workflow for SVG logo animation in After Effects?
Create SVG in Illustrator → import as layered AI → Create Shapes from Vector Layer → animate shape layers → export via Bodymovin → deliver Lottie JSON to developers.
Can I import SVG directly into After Effects without Illustrator?
Yes — AE imports SVG files directly (File > Import). For best layer control, export SVG layers from your design tool as separate files.
How small is a Lottie SVG animation file?
A typical icon animation in Lottie is 3–15KB JSON. The LottieFiles player (lottie-web) is ~60KB. For complex brand animations, Lottie files are 50–200KB — still much smaller than equivalent GIF or video.
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