SVG Animation Basics
For Web Designers
Create engaging, lightweight animations with SVG. Learn CSS and JavaScript techniques to bring your vectors to life.
SVG animations are one of the most powerful tools in modern web design. Unlike GIFs or videos, animated SVGs are lightweight, scalable, and can be controlled with code. They load fast, look sharp on any screen, and can respond to user interactions.
In this guide, we'll cover the fundamentals of SVG animation, from simple CSS transforms to interactive JavaScript animations.
Why Animate SVGs?
Lightweight
A complex SVG animation can be under 10KB. Equivalent GIFs would be 100KB+.
Sharp at Any Size
Animations stay crisp from mobile to 4K displays without creating multiple files.
Interactive
Respond to hover, click, scroll, and other user interactions in real-time.
Method 1: CSS Animations
The simplest way to animate SVGs is with CSS. You can use transitions for hover effects or keyframe animations for continuous motion.
Rotating an Element
/* CSS */
.spinner {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}Add the spinner class to any SVG element to make it rotate continuously.
Hover Color Change
/* CSS */
.icon path {
fill: #666;
transition: fill 0.3s ease;
}
.icon:hover path {
fill: #1cb721;
}SVG paths can be styled directly with CSS for smooth color transitions on hover.
Pulse Effect
/* CSS */
.pulse {
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
}Great for notification badges, call-to-action buttons, or attention-grabbing elements.
Method 2: SMIL (Built-in SVG Animation)
SVG has its own animation syntax called SMIL. It's written directly in the SVG markup and doesn't require external CSS or JavaScript.
Animate a Circle's Radius
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="20" fill="#1cb721">
<animate
attributeName="r"
values="20;35;20"
dur="1.5s"
repeatCount="indefinite"
/>
</circle>
</svg>Note: SMIL has limited browser support (not in IE/old Edge). CSS animations are more widely compatible.
Method 3: JavaScript Animation
For complex, interactive animations, JavaScript libraries provide powerful control. Popular options include GSAP, Anime.js, and Framer Motion.
GSAP Example
// Animate SVG path drawing
gsap.from(".logo-path", {
strokeDashoffset: 1000,
duration: 2,
ease: "power2.out"
});
// Hover interaction
document.querySelector(".icon").addEventListener("mouseenter", () => {
gsap.to(".icon", { scale: 1.2, duration: 0.3 });
});JavaScript allows for scroll-triggered animations, complex sequences, and dynamic interactions.
Popular SVG Animation Types
Line Drawing
Animate stroke-dashoffset to create the effect of lines being drawn. Perfect for logo reveals.
Morphing
Transform one shape into another by animating path data. Great for icon transitions.
Loading Spinners
Rotating circles, dots, or custom shapes for loading indicators that match your brand.
Hover States
Color changes, scale effects, and micro-interactions for buttons and icons.
Scroll Animations
Trigger animations as elements enter the viewport for engaging storytelling.
Infinite Loops
Background patterns, decorative elements, or ambient motion that runs continuously.
Get SVGs Ready for Animation
Convert your images to clean SVG vectors, perfect for adding CSS and JavaScript animations.
Create SVGs Now