Written by Jamie Park — UI/UX Designer. I animate SVGs instead of using GIFs. They're smaller, sharper, and don't need JavaScript. More about me →
A client once asked me to add a "subtle loading animation" to their logo. The developer came back with a 1.2MB Lottie file that required a JavaScript library to render. I replaced it with a 1.8KB SVG that animated natively in every browser. No JavaScript. No library. No GIF artifacts. SVG animation has been quietly capable of this for years—it just doesn't get talked about enough.
SMIL (Synchronized Multimedia Integration Language) is built directly into SVG—you write <animate> elements inside your SVG markup. It handles path morphing, color transitions, and sequential animation without a single line of JavaScript. CSS animation works on SVG elements too—you can target any SVG element with @keyframes and animate transforms, opacity, and colors.
I prefer SMIL for path-based animations (like a line drawing itself) and CSS for opacity/transform animations (like a pulsing icon). Here's a line-draw animation in pure SVG:
<svg viewBox="0 0 100 100">
<path d="M10 50 Q50 10 90 50" fill="none" stroke="#f97316" stroke-width="3"
stroke-dasharray="120" stroke-dashoffset="120">
<animate attributeName="stroke-dashoffset" from="120" to="0"
dur="1.5s" fill="freeze"/>
</path>
</svg>
This renders a curved line that draws itself over 1.5 seconds. The stroke-dasharray tricks the browser into revealing the stroke progressively. According to the MDN SVG tutorial, SMIL animation works in all modern browsers—Safari was the last holdout and added full support in 2025.
SVG animation wins for icons, logos, and loading indicators—anything under 100KB where you want infinite scaling and clean lines. It fails for complex character animation or anything requiring frame-by-frame timing. For those cases, export your SVG to a high-resolution PNG sequence with svg2png.org and composite them into a video—but for a simple animated icon, that's overkill.
One warning: animating too many SVG elements simultaneously (50+) will tank performance on mobile. I found this the hard way animating a particle effect with 200 individual circles—the animation ran at 4fps on an iPhone SE. Keep your animated elements under 20 for smooth 60fps playback.
Written by Jamie Park — UI/UX Designer. I animate SVGs instead of using GIFs. They're smaller, sharper, and don't need JavaScript. More about me →