Last updated
SVG Animation Methods
SVG supports three animation approaches: SMIL (SVG's native animation language), CSS animations, and JavaScript (via the Web Animations API or libraries like GSAP). SMIL is being deprecated in some browsers. CSS animations are the most widely supported and easiest to use for simple transitions. JavaScript gives the most control for complex, interactive animations.
CSS Animation on SVG Elements
HTML
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<style>
.spinner {
transform-origin: 50px 50px;
animation: spin 2s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.pulse {
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; r: 20; }
50% { opacity: 0.5; r: 25; }
}
</style>
<g class="spinner">
<line x1="50" y1="10" x2="50" y2="30" stroke="#3498DB" stroke-width="4" stroke-linecap="round"/>
</g>
<circle class="pulse" cx="50" cy="50" r="20" fill="#E74C3C"/>
</svg>SMIL Animation (Legacy)
SVG
<circle cx="50" cy="50" r="20" fill="#2ECC71">
<animate attributeName="r"
values="20;30;20"
dur="2s"
repeatCount="indefinite"/>
<animate attributeName="fill"
values="#2ECC71;#3498DB;#2ECC71"
dur="2s"
repeatCount="indefinite"/>
</circle>Performance Tips
- Animate
transformandopacity— these are GPU-accelerated. - Avoid animating layout properties like
width,height, orx/ydirectly. - Use
will-change: transformon elements that animate frequently. - Prefer CSS animations over JavaScript for simple loops — they run on the compositor thread.