How to Animate SVG with CSS: Keyframes, Stroke & Data URIs

Scalable Vector Graphics (SVG) combined with CSS animation unlock interactive UI micro-interactions, responsive spinners, and smooth line-drawing sequences without the heavy payload of video or GIF files. However, animating SVGs in web browsers involves distinct architectural boundaries—especially when deciding between inline <svg> elements, CSS mask-image, and URL-encoded background-image Data URIs.

1. The SVG Line-Drawing Animation Technique

The classic vector drawing effect—where an icon appears to draw itself onto the screen—relies on two foundational SVG stroke properties: stroke-dasharray and stroke-dashoffset.

/* 1. Define the initial stroke setup */
.animated-icon-path {
  stroke: #38bdf8;
  stroke-width: 2;
  fill: transparent;
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
  animation: drawStroke 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 2. Keyframes transition the offset to reveal the path */
@keyframes drawStroke {
  to {
    stroke-dashoffset: 0;
  }
}

2. Animating CSS Background Data URIs

When an SVG is embedded as an image via a Data URI or an <img> tag, modern browsers place it in an isolated image sandbox. External stylesheets cannot target internal paths directly, but you can animate the container's GPU transform:

.loading-spinner {
  width: 24px;
  height: 24px;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%2338bdf8\' stroke-width=\'2.5\'%3E%3Cpath d=\'M12 2 A 10 10 0 0 1 22 12\'/%3E%3C/svg%3E');
  background-size: contain;
  background-repeat: no-repeat;
  animation: spin 0.8s linear infinite;
  will-change: transform;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

3. Transform Origin Differences: HTML vs SVG

In SVG child elements, transform origins can default to 0 0 instead of the center of the shape. To ensure smooth rotation around the icon center, declare:

.rotating-gear {
  transform-box: fill-box;
  transform-origin: center;
  animation: spinGear 3s linear infinite;
}