SVG Animations

One of the most exciting aspects of SVG is that it can be animated. There are two primary ways to do this: using CSS or using native SVG animation tags (also known as SMIL).

Method 1: CSS Animations

Since inline SVGs are part of the DOM, you can use standard CSS animations and transitions on them. This is often the easiest and most performant way to move or fade SVG elements.

View Output

Method 2: Native SVG Animation (SMIL)

Unlike CSS animations which live in a separate stylesheet, native SVG animations (part of the SMIL specification) are declared as elements directly inside the shape they affect. These can be handy because they can animate things CSS sometimes can't, like the d attribute of a path.

To use them, you nest the animation tag within the target element. This tells the browser exactly which object to manipulate without the need for external selectors. There are two primary tags you will use for most animations:

<animate>: Used to change a single attribute over time. It can target coordinates (x, y, cx, cy, r), colors (fill, stroke), and even complex path data (d).
<animateTransform>: A specialized version used specifically for the transform attribute. It requires a type attribute (such as translate, scale, rotate, skewX, or skewY) to define the specific transformation being applied.

Common Animation Attributes

Both tags share a set of basic attributes that control the timing and behavior of the animation:

Attribute	Description
`attributeName`	The name of the attribute to animate (e.g. `fill`, `width`, `d`).
`from` / `to`	The starting and ending values for the animation.
`values`	A semicolon-separated list of values. Use this instead of `from/to` for multi-step animations.
`dur`	The duration of the animation (e.g. `3s` or `500ms`).
`repeatCount`	How many times to repeat. Set to `indefinite` for a continuous loop.
`fill`	Controls the state after the animation ends. `freeze` keeps the final state; `remove` resets it.
`begin`	When the animation starts (e.g. `0s`, `click`, or after another animation ends).

Example 1: Native Animations

View Output

Example 2: Shape Morphing

One area where native SVG animation excels is shape morphing. This is the ability to smoothly transition a shape from one form to another by animating the d attribute of a <path> element.

Here's an example of a smooth morphing animation:

View Output

For morphing to work smoothly, the "from" and "to" paths must contain the exact same number of points and utilize the same sequence of command types (for example, both must use 4 Cubic Bezier curves). If the point counts or command types don't match, the browser will likely "jump" or flicker between the shapes instead of morphing them.

Which one should I use?

For simple movements, rotations, and fades, CSS is generally recommended as it's familiar and widely supported. Use native SVG tags if you need to animate path data (morphing shapes) or if you want the animation to be self-contained within the SVG file itself.

Congratulations! You've reached the end of the SVG tutorial. You should now have a solid foundation for creating, styling, and animating vector graphics on the web.