SVG Animation

Bring your vector graphics to life with animation.

Animation Methods

CSS Animation

Modern, performant, familiar syntax

SMIL

Native SVG, declarative, path animation

JavaScript

Full control, complex sequences

CSS Animation Example

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

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

SMIL Animation

<circle cx="50" cy="50" r="10">
  <animate
    attributeName="r"
    values="10;20;10"
    dur="1s"
    repeatCount="indefinite"/>
</circle>

Path Animation

<path id="motionPath" d="M 10 80 Q 95 10 180 80"/>
<circle r="5">
  <animateMotion dur="2s" repeatCount="indefinite">
    <mpath href="#motionPath"/>
  </animateMotion>
</circle>

Line Drawing Effect

path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s linear forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

Performance Tips

  • Animate transform and opacity for best performance
  • Use will-change for complex animations
  • Prefer CSS over JavaScript for simple animations
  • Test on mobile devices
💡

SVG Animation Explained Simply

Think of SVG animation like a puppet show rather than a flipbook cartoon. In traditional animation, you draw dozens of slightly different pictures and flip through them quickly to create the illusion of movement. With SVG animation, you have a single puppet (your vector shape) and you simply tell it how to move, grow, spin, or change color over time. The browser does all the in-between work, smoothly transitioning your shape from one state to another.

There are three main ways to animate SVGs, each with its own personality. CSS animation is like giving your puppet simple stage directions: "spin around," "fade in," "move left." It uses the same familiar syntax web developers already know for animating HTML elements, making it the most approachable option. SMIL (the SVG-native animation language) is more like choreographing a dance routine directly into the puppet itself. The movement instructions live inside the SVG code, which is particularly powerful for complex path-following animations where you want an element to travel along a curved line.

JavaScript animation is like having a puppet master with complete control over every string. You can make decisions on the fly, respond to user interactions, coordinate multiple animations with precise timing, and create effects that would be impossible with CSS or SMIL alone. Libraries like GSAP act as skilled assistants, handling the complex math of smooth motion while you focus on the creative direction.

The beauty of SVG animation lies in its mathematical nature. Because SVGs are defined by coordinates and formulas rather than pixels, animations remain crisp and smooth at any size. Whether your animated logo appears on a mobile phone or a billboard, the browser calculates the perfect frames for that exact resolution. This makes SVG the ideal choice for animated icons, loading spinners, interactive data visualizations, and any graphic that needs to look sharp while moving gracefully across the modern web.

Frequently Asked Questions

What is SVG animation and how does it work?
SVG animation brings vector graphics to life by changing their properties over time. Unlike raster animations that require multiple image frames, SVG animations modify mathematical descriptions of shapes, allowing for smooth, scalable movement. You can animate properties like position, size, color, opacity, and even complex path morphing using CSS, SMIL, or JavaScript.
What is the difference between CSS, SMIL, and JavaScript SVG animations?
CSS animations are the most common approach, using familiar keyframes and transition syntax with excellent browser support and hardware acceleration. SMIL (Synchronized Multimedia Integration Language) is native to SVG and excels at path-based animations like motion along a path, though it lacks IE/Edge Legacy support. JavaScript provides the most control for complex, interactive animations and timeline sequencing, often used through libraries like GSAP or Anime.js.
Is SMIL animation still supported in modern browsers?
Yes, SMIL is supported in Chrome, Firefox, Safari, and Edge (Chromium-based). Chrome previously deprecated SMIL but reversed that decision. However, SMIL never worked in Internet Explorer or legacy Edge. For maximum compatibility, CSS animations are recommended, but SMIL remains excellent for features like animateMotion that CSS cannot easily replicate.
How do I create a line drawing animation in SVG?
Line drawing animations use the stroke-dasharray and stroke-dashoffset properties. Set stroke-dasharray to the total path length, then animate stroke-dashoffset from that length to zero. This creates the illusion of the line being drawn. Use JavaScript's getTotalLength() method to calculate the exact path length, or estimate with a large value for simpler implementations.
What SVG properties can be animated for best performance?
For optimal performance, animate transform (translate, scale, rotate) and opacity properties, as browsers can hardware-accelerate these using the GPU. Avoid animating properties that trigger layout recalculations like width, height, or positioning. Use the CSS will-change property sparingly to hint at upcoming animations, and test on mobile devices where performance is more constrained.
Can SVG animations be made accessible?
Yes, accessible SVG animations should respect the prefers-reduced-motion media query by pausing or simplifying animations for users who prefer less motion. Add appropriate ARIA labels and roles to describe the animation's purpose. Ensure animations don't flash more than three times per second to prevent seizure risks, and provide alternative static content when animations convey important information.
How do I animate SVG elements along a path?
Path animation is achieved using SMIL's animateMotion element with an mpath reference to your motion path, or using CSS offset-path (motion-path) property. SMIL offers rotate='auto' to orient elements along the path direction. For JavaScript, libraries like GSAP's MotionPathPlugin provide powerful path animation with timeline control and easing options.
What are the best JavaScript libraries for SVG animation?
GSAP (GreenSock) is the industry standard for professional SVG animations, offering robust timeline control and the MorphSVG plugin. Anime.js provides a lightweight alternative with good SVG support. Snap.svg focuses specifically on SVG manipulation and animation. Lottie renders After Effects animations as SVG. For simple animations, Velocity.js or native Web Animations API work well.
How do I loop an SVG animation infinitely?
For CSS animations, use animation-iteration-count: infinite or the shorthand animation: name 2s linear infinite. In SMIL, set repeatCount='indefinite' on animate elements. For JavaScript, use recursive callbacks, requestAnimationFrame loops, or library features like GSAP's repeat: -1. Ensure looping animations have seamless transitions between end and start states.
Why is my SVG animation not working?
Common issues include: missing transform-origin (set to 'center' for rotation), inline SVG required for CSS targeting (external SVGs have limited style access), incorrect viewBox affecting positioning, SMIL not supported in your browser, or CSS specificity conflicts. Check browser DevTools for errors, verify element IDs match your selectors, and ensure the SVG is properly embedded in HTML rather than referenced as an image.