SVG for Animation
Animate SVG graphics with CSS, JavaScript, and dedicated animation tools for smooth, resolution-independent web animation.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG Animation Methods
Four primary approaches to animating SVG, each with different capabilities.
| Method | Best For | Difficulty |
|---|---|---|
| CSS @keyframes | Simple loops, hover effects, transitions | Easy |
| GreenSock (GSAP) | Complex, timeline-based motion | Medium |
| Lottie (BodyMovin) | After Effects animations for web | Medium |
| Web Animations API | Programmatic, performance-critical | Advanced |
CSS SVG Animation Patterns
Most SVG animations can be achieved with CSS alone.
- Spinning loader: @keyframes rotate { to { transform: rotate(360deg); } }
- Draw-on effect: animate stroke-dashoffset from path length to 0
- Pulse: @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
- Morph (same node count): @keyframes morph { to { d: path('...'); } }
Lottie: After Effects → SVG Animation
Lottie converts Adobe After Effects animations to JSON-format vector animations that play natively in browsers and apps.
- Design and animate in After Effects
- Export with BodyMovin AE plugin → .json file
- Play with lottie-web npm package in browser
- Lottie files are vector-based — scale perfectly
- Lottie Player for iOS, Android, and React Native
Converting Images to SVG for Animation
For animated SVG graphics, start with clean SVG paths by converting your artwork using our tool. Then add animation in CSS or GSAP.
- Convert your artwork PNG to SVG
- Open in Inkscape to identify and label individual paths
- Add id='path-name' to paths you want to animate
- Reference by ID in CSS or JavaScript animation
Frequently Asked Questions
What's the easiest way to create an SVG animation?
CSS @keyframes is the easiest. Select an SVG element in code, add animation: name 1s ease infinite, define the @keyframes. Works for 80% of simple animation use cases.
Can I convert a GIF to an animated SVG?
Not directly — GIF is frame-based raster. SVG animation is path-based. You'd need to recreate the animation from scratch as SVG paths with CSS/JS animation.
Does Framer Motion work with SVG elements?
Yes. Framer Motion in React works on SVG elements: <motion.path initial={{ pathLength: 0 }} animate={{ pathLength: 1 }} />. Excellent for draw-on effects.
How do I create a morphing SVG animation?
For CSS morphing (d property animation): works in Chrome. The two paths must have the same number and type of commands. GSAP MorphSVG plugin handles different path structures.
Can I use animated SVG in email?
Not reliably. Only Apple Mail and Thunderbird play SVG animations. For animated email graphics, use GIF as the universal format.
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