SVG Animation Guide: CSS, SMIL & JavaScript Methods

Updated June 2026 · 7 min read

SVGs aren't just static images — they're programmable documents that can move, morph, and respond to user interaction. Unlike GIF or video animations, SVG animations are resolution-independent, file-size efficient, and can be controlled with code. Here's how to animate SVGs using three different methods.

Method 1: CSS Animations

CSS is the simplest way to animate SVG elements. Most CSS properties that work on HTML elements also work on SVG elements — with a few SVG-specific additions.

Basic Fade-In

<svg viewBox="0 0 100 100">
  <style>
    .fade-in { animation: fade 2s ease-in-out infinite alternate; }
    @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  </style>
  <circle class="fade-in" cx="50" cy="50" r="40" fill="#7c3aed"/>
</svg>

Rotate and Scale

<style>
  .spin { animation: spin 3s linear infinite; transform-origin: 50px 50px; }
  @keyframes spin { to { transform: rotate(360deg); } }
</style>

What CSS can animate on SVG: opacity, transform (rotate/scale/translate), fill color, stroke color, stroke-width, stroke-dashoffset (for "drawing" effect).

What CSS can't animate: path data (d attribute), points attribute on polygons, complex shape morphing.

Browser support: Excellent (97%+). The most reliable method.

Method 2: SMIL (SVG Native Animation)

SMIL (Synchronized Multimedia Integration Language) is SVG's built-in animation system. It can animate attributes that CSS can't touch — most importantly, path data for shape morphing.

Morph a Circle into a Rectangle

<svg viewBox="0 0 200 100">
  <path fill="#7c3aed">
    <animate attributeName="d"
      values="M50,50 A30,30 0 1,1 110,50 A30,30 0 1,1 50,50;
              M40,20 L160,20 L160,80 L40,80 Z;
              M50,50 A30,30 0 1,1 110,50 A30,30 0 1,1 50,50"
      dur="3s" repeatCount="indefinite"/>
  </path>
</svg>

Draw a Line Progressively

<line x1="10" y1="50" x2="190" y2="50" stroke="#7c3aed" stroke-width="4">
  <animate attributeName="stroke-dashoffset" from="180" to="0" dur="2s" fill="freeze"/>
</line>

Pros: Animates path data, works without JavaScript, declarative syntax. Cons: Chrome once tried to deprecate it (reversed), IE never supported it, slightly less performant than CSS for many simultaneous animations.

Method 3: JavaScript (GSAP / Anime.js)

For complex, interactive, or data-driven animations, JavaScript libraries provide the most power and control.

GSAP Example (Morph + Fade)

gsap.to(".my-circle", {
  duration: 2,
  attr: { r: 80, fill: "#f59e0b" },
  repeat: -1,
  yoyo: true,
  ease: "power2.inOut"
});

Anime.js Example (Staggered Drawing)

anime({
  targets: ".line-segment",
  strokeDashoffset: [anime.setDashoffset, 0],
  duration: 2000,
  delay: anime.stagger(200),
  easing: "easeInOutSine"
});

When to use JS: Dynamic animations based on user input, complex timelines with many staggered elements, physics-based motion, integration with data (chart transitions).

Method Comparison

Performance Tips

• Use will-change: transform on animated elements to promote them to GPU layer
• Prefer CSS animations over SMIL for many simultaneous animations (browser can optimize CSS better)
• For 60fps smoothness, animate only transform and opacity — these are GPU-accelerated
• Beware of animating filter — it's CPU-intensive and can cause jank

Converting Animated SVG to Video/GIF

If you've created an animated SVG and need to share it where SVG isn't supported (social media, email), you'll need to convert it. Use a screen recorder or a tool like FFmpeg to capture the animation as MP4 or GIF. For static snapshots at a specific point in the animation, convert the SVG to PNG with svg2png.org.