Chapter 28: SVG Animation
SVG Animation means making any part of an SVG (shapes, paths, text, gradients, filters, transforms, strokes, opacity, colors, etc.) move, change, grow, fade, rotate, draw themselves, pulse, bounce, or morph over time — all inside the SVG code itself, without needing JavaScript in most cases.
The beauty of SVG animation is:
- It’s vector → no matter how much you zoom or how big/small the screen, animation stays perfectly sharp
- It’s lightweight → no heavy video or GIF files
- It’s native → works directly in HTML, no extra libraries needed for basic stuff
- It’s accessible & SEO-friendly → text & shapes remain readable
- It’s widely supported in 2026 (all modern browsers)
There are three main ways people animate SVG in 2025–2026:
- SMIL (SVG’s own animation language) — old but still very powerful
- CSS Animations & Transitions — most popular & easiest for modern projects
- JavaScript (GSAP, Anime.js, Snap.svg, etc.) — when you need very complex control
We’ll cover all three, but focus mostly on SMIL + CSS because they are pure SVG/HTML and don’t need libraries.
1. SMIL – SVG’s Built-in Animation (The Classic Way)
SMIL (Synchronized Multimedia Integration Language) is written directly inside SVG tags.
Most common element: <animate>, <animateTransform>, <animateMotion>, <set>
Example 1 – Simple Color Change (Beginner SMIL)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<svg width="200" height="200" viewBox="0 0 200 200"> <circle cx="100" cy="100" r="80" fill="orange"> <animate attributeName="fill" from="orange" to="purple" dur="3s" repeatCount="indefinite"/> </circle> </svg> |
→ Circle smoothly changes color orange → purple forever (3-second loop)
Example 2 – Rotate Forever (Most Famous SMIL Use)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<svg width="200" height="200" viewBox="0 0 200 200"> <g> <rect x="60" y="60" width="80" height="80" fill="teal"> <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="8s" repeatCount="indefinite"/> </rect> </g> </svg> |
→ Square rotates 360° around its center forever
Key SMIL attributes everyone must know:
| Attribute | Meaning | Common values |
|---|---|---|
| attributeName | What to animate (fill, opacity, r, etc.) | fill, opacity, transform, stroke-dashoffset |
| from / to | Start and end value | “red” to “blue”, 0 to 100 |
| dur | Duration of one cycle | 2s, 5s, 10s |
| repeatCount | How many times to repeat | indefinite, 3, 5 |
| begin | When to start | 0s, click, mouseover |
| fill (animation) | What happens after animation ends | freeze (stay at end), remove |
2. CSS Animations & Transitions – The Modern & Most Popular Way (2026 Standard)
CSS is easier to read, works with hover/click, and combines perfectly with SVG.
Example 3 – Hover Scale + Rotate (CSS Only)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> .grow-rotate { transition: transform 0.4s ease; } .grow-rotate:hover { transform: scale(1.3) rotate(15deg); } </style> <svg width="200" height="200"> <circle cx="100" cy="100" r="80" fill="coral" class="grow-rotate"/> </svg> |
→ Hover → circle grows 30% bigger and tilts 15°
Example 4 – Drawing Animation (Very Famous – Stroke Dashoffset Trick)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> .draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 5s linear forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } </style> <svg width="300" height="300" viewBox="0 0 300 300"> <path d="M50 250 Q 150 50 250 250" fill="none" stroke="purple" stroke-width="20" class="draw"/> </svg> |
→ Path “draws itself” from nothing to full line over 5 seconds
3. Combining SMIL + CSS + Transform (Real-World Power)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> .spin:hover { animation: spin 3s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } </style> <svg width="200" height="200"> <g transform="translate(100 100)"> <circle r="60" fill="gold"> <!-- SMIL pulse --> <animate attributeName="r" from="60" to="80" dur="2s" repeatCount="indefinite" additive="sum"/> </circle> <!-- CSS hover spin --> <circle r="40" fill="orange" class="spin"/> </g> </svg> |
→ Circle pulses bigger/smaller forever (SMIL) → Hover → whole group spins (CSS)
4. Quick Reference Table – Which Method to Choose?
| Goal | Best Method | Why? |
|---|---|---|
| Simple color/opacity change | SMIL or CSS | Both easy |
| Hover/click interaction | CSS | Native hover, :active, media queries |
| Path drawing / stroke animation | CSS (dashoffset) | Easiest & smoothest |
| Infinite rotation / pulsing | SMIL or CSS | Both good, SMIL more “SVG native” |
| Complex timeline / sequencing | JavaScript (GSAP, Anime.js) | Full control, chaining, easing |
| Legacy browser support | SMIL | Still works where CSS transform is weak |
5. Teacher’s Final Tips 😄
- Start with CSS for 80% of animations — easier to debug & maintain
- Use stroke-dasharray + dashoffset for almost every “draw on scroll” or “loading” effect
- SMIL has some deprecation warnings in Chrome → use CSS/JS for new projects if possible
- Always test on mobile — heavy animations + filters can slow down
- Common mistake: Forget transform-origin: center in CSS → rotation goes wrong
- Pro trick: Combine SVG animation + <use> → reuse animated icons everywhere
Understood SVG Animation now? This is one of the most exciting parts of SVG — almost every modern icon library, loader, button hover, chart reveal, and interactive map uses these techniques.
Tell me what you want next:
- Full “line drawing on scroll” example?
- Animated gradient / fill change?
- Morphing shape animation (SMIL <animate> on path d)?
- Hover bounce + scale + shadow?
- Or complete animated logo project?
Just say — we can animate anything together right now! 🚀
