Intro to SVG Animation

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