HtmlHow-ToBeginner · 4 min read

How to Animate SVG in HTML: Simple Guide with Examples

You can animate SVG in HTML using CSS animations or the SVG's built-in <animate> element (SMIL). CSS animations control SVG properties like transform or stroke-dashoffset, while <animate> lets you animate attributes directly inside the SVG code.

📐

Syntax

There are two main ways to animate SVG in HTML:

CSS animations: Use CSS rules targeting SVG elements or their attributes.
SVG <animate> element (SMIL): Place inside SVG tags to animate attributes over time.

Example parts:

<animate attributeName="property" from="value1" to="value2" dur="time" repeatCount="indefinite" /> animates an attribute.
@keyframes defines CSS animation steps.
animation property applies the animation to SVG elements.

html

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red">
    <animate attributeName="r" from="10" to="40" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

<style>
@keyframes moveCircle {
  0% { transform: translateX(0); }
  100% { transform: translateX(50px); }
}
circle {
  animation: moveCircle 2s infinite alternate;
}
</style>

Output

A red circle in an SVG that smoothly grows and shrinks its radius continuously, and also moves left to right repeatedly.

💻

Example

This example shows a blue circle that pulses in size using the SVG <animate> element and moves horizontally using CSS animation.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>SVG Animation Example</title>
<style>
  svg {
    width: 150px;
    height: 150px;
    border: 1px solid #ccc;
  }
  circle {
    animation: slide 3s ease-in-out infinite alternate;
  }
  @keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(60px); }
  }
</style>
</head>
<body>
  <svg viewBox="0 0 100 100" aria-label="Animated blue circle" role="img">
    <circle cx="50" cy="50" r="30" fill="blue">
      <animate attributeName="r" values="30;50;30" dur="2s" repeatCount="indefinite" />
    </circle>
  </svg>
</body>
</html>

Output

A blue circle inside a square border that smoothly grows and shrinks its radius repeatedly while sliding left and right horizontally.

⚠️

Common Pitfalls

Common mistakes when animating SVG include:

Forgetting to set viewBox on the SVG, which can cause scaling issues.
Using CSS properties that SVG elements don't support (like background-color).
Not adding repeatCount or animation-iteration-count to make animations loop.
Mixing CSS transforms and SVG attribute animations without understanding their differences.
Ignoring accessibility by not adding aria-label or role to SVGs.

Example of a wrong and right way to animate radius:

html

<!-- Wrong: CSS can't animate 'r' attribute directly -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="30" fill="green" style="animation: grow 2s infinite;" />
</svg>

<style>
@keyframes grow {
  from { r: 30; }
  to { r: 50; }
}
</style>

<!-- Right: Use SVG animate element -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="30" fill="green">
    <animate attributeName="r" values="30;50;30" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

Output

First SVG: circle radius does not animate because CSS can't animate 'r'. Second SVG: circle radius smoothly grows and shrinks repeatedly.

📊

Quick Reference

Tips for animating SVG in HTML:

Use <animate> for attribute animations like radius, color, or position inside SVG.
Use CSS animations for transforms, opacity, stroke-dasharray, and other style properties.
Always set viewBox on SVG for proper scaling.
Add aria-label and role="img" for accessibility.
Test animations in modern browsers; some older browsers may not support SMIL.

✅

Key Takeaways

Animate SVG attributes like radius or color using the <animate> element inside SVG.

Use CSS animations for transforms and style changes on SVG elements.

Always include a viewBox attribute on your SVG for correct scaling.

Add accessibility attributes like aria-label and role="img" to SVGs.

Test your animations in multiple browsers to ensure compatibility.