SVG Animations: CSS vs JavaScript

Method 1: CSS Animation (The Lightweight Way)

If you inline your SVG directly into your HTML, every ``, ``, and `` tag becomes part of the DOM. This means you can target them with CSS classes, `:hover` states, and `@keyframes`.

.spinner-path {
  transform-origin: center;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

• Best for: Hover effects, infinite loading spinners, simple pulsing, or stroke-drawing animations (using `stroke-dasharray`).
• Pros: Zero JavaScript overhead. Hardware accelerated by the browser's compositor.
• Cons: Cannot chain complex, multi-step timelines easily. Cross-browser bugs still exist for `transform-origin` on SVG paths in Safari.

Method 2: JavaScript (The Powerful Way)

When you need an SVG illustration to animate in response to scroll position, user clicks, or complex staggered timelines, CSS becomes a nightmare to manage. This is where JavaScript libraries like GSAP (GreenSock), Framer Motion, or Anime.js shine.

JavaScript allows you to read the exact length of a path, morph one path into another (e.g., turning a play button into a pause button), and sequence animations so that Step 2 only starts exactly when Step 1 finishes.

Method 3: SMIL (The Legacy Way)

SMIL (Synchronized Multimedia Integration Language) allows you to write `` tags directly inside the SVG file itself.

While incredibly powerful because the animation remains self-contained even if you use the SVG in an `` tag, it is widely considered a dead spec. Chrome threatened to deprecate it years ago, and while they backed down, SMIL is rarely used in modern production environments. Stick to CSS or JS.