Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Animating SVG with CSS

Preview

Start a free Courses 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 is 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.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    SVG support for inner activity and animation has been around for some time. 0:00
    Long before CSS transitions, transforms, and key frame animations. 0:04
    SVG had other animation capabilities native to the browser 0:08
    that are still supported and used today. 0:12
    SVG itself has a built in syntax for animation, it's called SMIL. 0:15
    SMIL is short for Synchronized Multimedia Integration Language. 0:20
    And it comes with a set of animation elements for animating SVG content. 0:24
    With SMIL you can transform and animate the attributes of an SVG element 0:28
    directly in the XML markup used to create the SVG. 0:32
    Now, SMIL doesn't work in Internet Explorer and 0:35
    Microsoft has no plans to add SMIL support in the future. 0:38
    Also, the developers of Chrome are planning to remove SMIL in support of CSS 0:42
    animations. 0:46
    So, SMIL's future doesn't look too bright. 0:47
    So I recommend you skip this approach to animating SVGs. 0:50
    Another approach that's well-supported and 0:54
    used by many web designers is creating SVG animations with JavaScript. 0:56
    JavaScript gives you more control over the animations but 1:01
    it is a lot more complex than animating with CSS. 1:04
    These days, you can use JavaScript libraries like Snap, Velocity, and 1:07
    GSAP for animating SVG. 1:11
    Now, I won't be covering that approach in this course, but check the teacher's notes 1:13
    for more information on JavaScript animation libraries. 1:17
    There are many advantages that come with using SVG and CSS for animating graphics. 1:21
    First, SVGs are easily styleable with CSS. 1:26
    You're already familiar with CSS syntax. 1:30
    And they generally have good browser support. 1:33
    If you already know and are comfortable with CSS animations you'll have no problem 1:35
    integrating them into your projects. 1:39
    You simply open up your CSS file and adjust your graphic and 1:41
    animation using properties that are already familiar to you. 1:44
    Finally, SVG can be added to a webpage in three different ways. 1:48
    As an embedded image, a CSS background image, or as inline SVG. 1:51
    But not all three methods can be animated with CSS. 1:56
    Animating SVG attributes will not work for SVG embedded as an image, or 2:00
    as a CSS background image. 2:04
    We can only animate inline SVG with CSS. 2:06
    That's the SVG mark-up added directly within the HTML. 2:10
    So now that you're all up to speed with the different SVG animation methods, 2:13
    we'll get started by digging into SVG transitions and transforms with CSS. 2:17

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

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up