Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Intro to SVG Animation

2:21 with Guil Hernandez

SVG support for interactivity and animation has been around for some time. Long before CSS transitions, transforms and keyframe animations, SVG had other animation capabilities native to the browser that are still supported and used today.

Quick Reference

JavaScript Animation Libraries

Current Browser Support

While CSS transitions, transforms and animations are supported in IE10 & up, SVG animations are not.

  • 0:00

    SVG support for inner activity and animation has been around for some time.

  • 0:04

    Long before CSS transitions, transforms, and key frame animations.

  • 0:08

    SVG had other animation capabilities native to the browser

  • 0:12

    that are still supported and used today.

  • 0:15

    SVG itself has a built in syntax for animation, it's called SMIL.

  • 0:20

    SMIL is short for Synchronized Multimedia Integration Language.

  • 0:24

    And it comes with a set of animation elements for animating SVG content.

  • 0:28

    With SMIL you can transform and animate the attributes of an SVG element

  • 0:32

    directly in the XML markup used to create the SVG.

  • 0:35

    Now, SMIL doesn't work in Internet Explorer and

  • 0:38

    Microsoft has no plans to add SMIL support in the future.

  • 0:42

    Also, the developers of Chrome are planning to remove SMIL in support of CSS

  • 0:46

    animations.

  • 0:47

    So, SMIL's future doesn't look too bright.

  • 0:50

    So I recommend you skip this approach to animating SVGs.

  • 0:54

    Another approach that's well-supported and

  • 0:56

    used by many web designers is creating SVG animations with JavaScript.

  • 1:01

    JavaScript gives you more control over the animations but

  • 1:04

    it is a lot more complex than animating with CSS.

  • 1:07

    These days, you can use JavaScript libraries like Snap, Velocity, and

  • 1:11

    GSAP for animating SVG.

  • 1:13

    Now, I won't be covering that approach in this course, but check the teacher's notes

  • 1:17

    for more information on JavaScript animation libraries.

  • 1:21

    There are many advantages that come with using SVG and CSS for animating graphics.

  • 1:26

    First, SVGs are easily styleable with CSS.

  • 1:30

    You're already familiar with CSS syntax.

  • 1:33

    And they generally have good browser support.

  • 1:35

    If you already know and are comfortable with CSS animations you'll have no problem

  • 1:39

    integrating them into your projects.

  • 1:41

    You simply open up your CSS file and adjust your graphic and

  • 1:44

    animation using properties that are already familiar to you.

  • 1:48

    Finally, SVG can be added to a webpage in three different ways.

  • 1:51

    As an embedded image, a CSS background image, or as inline SVG.

  • 1:56

    But not all three methods can be animated with CSS.

  • 2:00

    Animating SVG attributes will not work for SVG embedded as an image, or

  • 2:04

    as a CSS background image.

  • 2:06

    We can only animate inline SVG with CSS.

  • 2:10

    That's the SVG mark-up added directly within the HTML.

  • 2:13

    So now that you're all up to speed with the different SVG animation methods,

  • 2:17

    we'll get started by digging into SVG transitions and transforms with CSS.

You need to sign up for Treehouse in order to download course files.

Sign up