SVG Animation Guide: Animating Icons with CSS

SVG animation is the combination of vector geometry, CSS, and sometimes JavaScript. The browser can animate a group, a path, or a single attribute, which makes SVG useful for progress indicators, diagrams, maps, and interface feedback. The same flexibility also makes coordinate systems and performance important to understand.

Start with a small, explicit example

This example rotates a group around the center of a 120 by 120 viewBox:

<svg viewBox="0 0 120 120" role="img" aria-labelledby="title">
  <title id="title">A rotating loading indicator</title>
  <g class="spinner" transform-origin="60px 60px">
    <path d="M60 12a48 48 0 1 1-33.94 14.06" fill="none" stroke="currentColor" stroke-width="8" stroke-linecap="round" />
  </g>
</svg>

@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin 1.2s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

The explicit transform-origin avoids relying on browser defaults. For more complex artwork, confirm the element's own coordinate system and any parent transforms before adjusting the animation.

The path-drawing technique

To make a line appear as if it is being drawn, set a dash that covers the path and animate the offset:

.draw-line {
  fill: none;
  stroke: #f97316;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: draw 1.4s ease-out forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

The number must be close to the path length. You can calculate it with getTotalLength() for a generated illustration, or tune it from the preview. If the path changes, the hard-coded value may need to change too.

CSS, SMIL, or JavaScript?

• Use CSS for opacity, transforms, color transitions, and simple timelines that can be controlled with media queries.
• Use SMIL when the animation is naturally expressed as an SVG attribute timeline and the browser support you need is confirmed.
• Use JavaScript for interaction-driven changes, sequencing based on application state, or values that come from data.

JavaScript should not update hundreds of SVG attributes on every pointer event. Collect input, schedule one update with requestAnimationFrame, and change only the nodes that actually differ. Measure the result on the least powerful supported device rather than relying on a desktop preview.

Coordinate-system pitfalls

When an element rotates around the wrong point, check these values in order:

1. The viewBox and the element's local coordinates.
2. Parent transform attributes and CSS transforms.
3. The element's transform-origin and transform-box.
4. Whether the stroke extends beyond the shape's bounding box.

For path morphing, two paths need compatible command structures. A reliable workflow is to normalize both paths to the same command types and number of points before interpolating. If the shapes cannot be matched cleanly, animate opacity or a clip path instead of producing a distorted intermediate state.

Accessibility and interaction

Motion should communicate a state, not block access to the content. Add a text label for meaningful graphics, keep decorative animation aria-hidden, and respect prefers-reduced-motion. For an animated control, provide a static state that still explains what is happening when animation is disabled.

Avoid using animation as the only way to reveal information. A progress value, status label, or visible focus ring should remain available to keyboard and screen-reader users.

A practical debugging checklist

• Reduce the example to one element and one animation.
• Add a temporary outline to the element and its parent to see the bounds.
• Use DevTools to inspect the computed transform and animation timeline.
• Disable filters and shadows while investigating geometry.
• Test a reduced-motion mode and a slow network/device profile.
• Remove the animation when it does not improve comprehension or feedback.

SVGDO's split view is useful for this process because the source and preview can be checked together. Treat the editor as a test bench: make one change, inspect the rendered result, and keep the source readable enough for the next person to maintain.