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 it's 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 thing 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.

Comments

  1. User Avatar
    James makingthings
    Permalink to comment#

    Absolutely love the lessons. In this lesson, editing the envelope in illustrator, ‘object/compound path/release’ is your friend, it has the effect of ungrouping all the shapes. Hope that helps

  2. User Avatar
    Benjamin Listwon
    Permalink to comment#

    Oh man, this one is great! What a cool effect with so little markup. I can’t wait to find a situation where I can use this.

    Totally agree on the motion calling attention to the fact that something is occurring / has occurred. Much more “natural” feeling than just swapping it out.

    Chris, fwiw, I think the original viewbox was 0,0,100,100, and the latter ones were 0,0,250,250. It’s probably ancient history to you now, but I noticed it on the way through :-)

  3. User Avatar
    daniel tapias

    Great work. Congrats.

    By the way, I tried to do the same. Not so beautiful, but I did :) … please, check it out: http://codepen.io/tapmorales/pen/QNYwEY

    To get it, I just flip the path without rotate it into Illustrator. And worked as I wanted.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag