23: Animating SVG with SMIL

Even though animating SVG with CSS might be more comfortable for the average front-end person, SVG has another way do animation built right into the SVG syntax itself. This is exactly what we cover in brief in this video, but if you want a complete reference guide definitely check out A Guide to SVG Animations (SMIL) by Sara Soueidan right here on CSS-Tricks.

SMIL stands for Synchronized Multimedia Integration Language. As I understand it, that is a “thing” all unto itself that happens to be built into SVG. But SVG has some of its own SMIL-like additions. I’ll just refer to it all as SMIL even though I’m sure I’m technically incorrect sometimes.

For very simple animations, it doesn’t much matter if you do it in SMIL or CSS, it’ll do the same thing at about the same level of difficulty. Some things might even be easier in CSS. But here are some things where SMIL is the way to go:

• You need to animate something that CSS can’t touch. Like the shape of a polygon or path.
• You want to use events to affect the animation, like a click or mouseover or something.
• You want to do additive animations, like, animate from wherever you are now another x pixels.
• You want to have animations that relate directly to other animations, like, when this animation finishes kick off this next animation (without manually manipulating durations).
• I’m sure there are more.

The syntax feels intimidating at first, but it’s really pretty easy I promise. Here’s a basic example:

<svg>
  
  <rect x="5" y="5" width="50" height="50">
    
    <animate attributeName="width" to="75" dur="2s"></animate>
    
    <animate attributeName="y" to="25" dur="2s"></animate>
    
    <animate attributeName="fill" to="red" dur="2s"></animate>
    
  </rect>
  
</svg>

See the Pen jAipI by Chris Coyier (@chriscoyier) on CodePen.

The “shape morphing” thing is really super unique with SMIL, so here’s a better example than the weird one we did in the video:

See the Pen Shape Morph Button by Chris Coyier (@chriscoyier) on CodePen.

In that demo, the events are handled by JavaScript instead of SMIL. Just nice to know you can do that too. SMIL event triggers are cool but then the thing that needs clicked has to be in that SVG rather than just anywhere else in the DOM.