SVG Animation
A logo that draws itself, an icon that reacts to hover, a spinner that ships nothing extra — vector graphics animate themselves, because the geometry is already addressable. What follows is which technique to use where, and what each one costs.
A live animation, not a recording — and it holds still for anyone who has asked for reduced motion.
Six steps
Two decisions come before any keyframe: what the elements are called, and how the file gets onto the page. Both are cheap now and expensive to change once the animation exists.
An animation targets a selector. A drawing of forty anonymous paths gives you nothing to select, so naming comes before motion — not as tidiness, as a prerequisite.
Inline in the document, or loaded through an <img> or background-image? Inline means page CSS and JavaScript can reach it. Loaded as a resource, it is isolated and only what is inside the file will run.
Transform and opacity are handled by the compositor and cost almost nothing. Geometry attributes force a re-layout every frame. Reach for the expensive ones only when nothing else does the job.
For a draw-on, set stroke-dasharray to the path length, stroke-dashoffset to the same value, then animate the offset to zero. For a loop that must survive an <img> tag, use SMIL instead.
Wrap decorative motion in a prefers-reduced-motion query and define the resting state explicitly. Three lines, and it matters to anyone who gets motion sick from a looping graphic.
The same file can animate in the document and sit frozen in an <img> on the next page. Test the delivery method, not just the file.
Four techniques
The deciding question is almost never aesthetic. It is whether the SVG is inline in the document or loaded as a separate resource.
External stylesheet or a <style> block inside the SVG
Best for
Almost everything. Transforms, opacity, fills, stroke-dashoffset — with hover and media queries available.
Limits
Only works on an inline SVG or one with its styles embedded. An SVG loaded through <img> is isolated from page CSS.
Elements inside the SVG itself
Best for
Self-contained files that must animate anywhere, including inside an <img> tag or an email client that allows it.
Limits
Declarative and awkward to sequence. Support is good in modern browsers but it is a dead-end spec.
JavaScript
Best for
Anything driven by state — scroll position, a click, data arriving. Full playback control.
Limits
Needs JavaScript, so nothing animates before hydration.
Stylesheet, on hover or a class change
Best for
Micro-interactions: an icon that shifts colour or nudges on hover. Cheapest thing on this list.
Limits
Two states only. Anything with a middle needs keyframes.
The two you will actually write
#stem {
stroke-dasharray: 320;
stroke-dashoffset: 320;
animation: draw 2s ease forwards;
}
@keyframes draw {
to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
#stem {
animation: none;
stroke-dashoffset: 0;
}
}<g id="badge">
<circle r="20" fill="#F25C05"/>
<animateTransform
attributeName="transform"
type="rotate"
from="0" to="360"
dur="8s"
repeatCount="indefinite"/>
</g>Both target an element by ID. That is the practical reason named layers matter: animating #stem is possible, animating the fourth anonymous path is not.
Cost of each property
| Property | Cost | Notes |
|---|---|---|
| transform | Cheap — compositor only | Move, rotate and scale groups. Set transform-box and transform-origin or it rotates about the wrong point. |
| opacity | Cheap — compositor only | Fades and cross-dissolves between states. |
| stroke-dashoffset | Moderate | The draw-on effect. Set dasharray to the path length and animate offset to zero. |
| fill / stroke | Moderate | Colour transitions. Reference a CSS variable and one change repaints the whole drawing. |
| d (path data) | Expensive | True shape morphing. Only interpolates when both paths have the same command structure. |
| x / y / width | Expensive — triggers layout | Prefer a transform. Animating geometry attributes forces a re-layout every frame. |
SVG, Lottie, GIF, video
The honest split is by what the motion is. Interface behaviour belongs in SVG; a character walking across the screen probably does not.
runtime: None
Good at
Interface motion: draw-on logos, icon micro-interactions, spinners, state changes. Scales to any size and the text inside stays real text.
Bad at
Hand-authoring complex character animation is miserable. There is no timeline unless you bring a tool.
runtime: A JavaScript player you ship
Good at
Complex, keyframe-heavy motion exported straight out of After Effects. This is what it is genuinely better at.
Bad at
It is JSON plus a runtime, so nothing moves before the script loads, and you need the After Effects pipeline to author it.
runtime: None
Good at
Works anywhere, including places that strip scripts. No integration work at all.
Bad at
Raster, so it blurs when scaled; a fixed frame rate, a limited palette, and file sizes far past anything vector needs.
runtime: The video element
Good at
Photographic or filmed motion, where vector is the wrong tool entirely.
Bad at
Heavy, autoplay is restricted on mobile, and a flat rectangle cannot inherit your theme colours.
If you want a timeline
There is no timeline here and nothing on this site generates motion — what we produce is static geometry with named groups, which is the thing an animation needs to exist first. When you would rather drag keyframes than write them, these are the tools.
A timeline editor in the browser — keyframes, morphing, motion paths, click and hover triggers, and an export that carries the animation in the file.
Free and single-purpose: paste an SVG, get the stroke and fill draw-on animation written out as CSS you can copy. The fastest route to the effect in the hero above.
The library for anything sequenced or scroll-driven, with SVG-specific plugins for morphing, drawing and dragging. Reaches for JavaScript where the others stop.
Declarative animation for React, including path drawing and morphing, if the SVG is already a component in your tree.
Questions