#fronteers14

Sara Soueidan - Animating SVGs with CSS and SMIL

Fronteers 2014 | Amsterdam, October 10, 2014

SVGs can be animated with CSS, but they also come packed with their own animation elements that allow us to animate them in ways that are not yet possible with CSS. In this session, we'll go over how SVGs can be animated with CSS, including prerequisites, gotchas, and browser bugs, and then we'll go over the native SVG animation elements and how they can be used, what advantages and disadvantages they have compared to CSS animations, browser compatibility, and a little bit more!

Slides

Transcript

00:03.330 --> 00:08.400 SVG is something of an enigma to me. 00:08.400 --> 00:12.500 It was really born out of the dark times of the web, where 00:12.500 --> 00:16.390 I imagine the web was controlled by a group of beardy men 00:16.390 --> 00:20.910 sitting in a tepee dressed only in loincloths, and one of them 00:20.910 --> 00:23.513 would take a drag from an almighty spliff and say, 00:23.513 --> 00:28.590 [INHALING], we should do this in XML. 00:28.590 --> 00:30.730 But despite that, and display no one 00:30.730 --> 00:32.560 really using it for years and years, 00:32.560 --> 00:37.020 SVG has actually turned out pretty good. 00:37.020 --> 00:40.800 We're kind of rediscovering it [INAUDIBLE] 00:40.800 --> 00:43.700 animation in SVG, which we're only just starting 00:43.700 --> 00:45.330 to rediscover. 00:45.330 --> 00:50.000 Give a huge, just-before-lunch welcome to Sara Soueidan. 00:57.350 --> 00:58.640 Hi. 00:58.640 --> 01:01.310 First of all, thank you for being here and for having me. 01:01.310 --> 01:03.120 I hope everyone's awake. 01:03.120 --> 01:05.349 This is going to be a very technical talk. 01:05.349 --> 01:09.360 And it's going to be a very technical talk. 01:09.360 --> 01:13.540 So first, quick about me. 01:13.540 --> 01:16.430 I'm a freelance front-end developer from Lebanon. 01:16.430 --> 01:17.780 I'm also a writer. 01:17.780 --> 01:21.550 I love teaching-- and I forgot to start it. 01:21.550 --> 01:22.500 I love teaching. 01:22.500 --> 01:24.000 And I love writing, so I've combined 01:24.000 --> 01:26.850 both into writing a lot of articles and tutorials, most 01:26.850 --> 01:29.860 of which have been about cutting edge CSS features, 01:29.860 --> 01:31.400 like CSS Regions and Shapes. 01:31.400 --> 01:34.040 And recently I've been focusing a lot on SVG, 01:34.040 --> 01:37.260 and hence this talk today about SVG. 01:37.260 --> 01:40.210 I'm also an author and team member at Codrops. 01:40.210 --> 01:43.010 So I'm here to talk to you about animating SVGs 01:43.010 --> 01:45.990 with CSS and SMIL. 01:45.990 --> 01:49.780 Now, SVG is an XML based image format 01:49.780 --> 01:52.755 for two-dimensional graphics with support for interactivity 01:52.755 --> 01:53.590 and animation. 01:53.590 --> 01:55.830 This is the official definition of SVG. 01:55.830 --> 02:00.510 So they are basically XML tags that render images and shapes. 02:00.510 --> 02:03.220 Now, you can select SVG elements, 02:03.220 --> 02:05.970 style them, and animate them, just like you would select 02:05.970 --> 02:08.130 and style elements in HTML. 02:08.130 --> 02:11.640 You can even inspect individual elements in the dev tools, 02:11.640 --> 02:13.330 just like you can with HTML. 02:13.330 --> 02:17.730 And because of that, SVG can be animated using CSS. 02:17.730 --> 02:20.860 So, we're first going to cover the three techniques, three 02:20.860 --> 02:24.670 ways you can animate an SVG using CSS or using the SVG 02:24.670 --> 02:27.530 animations derived from the SMIL specification, 02:27.530 --> 02:28.840 or using JavaScript. 02:28.840 --> 02:30.540 But we're not going to be covering 02:30.540 --> 02:32.830 JavaScript in this talk. 02:32.830 --> 02:36.990 So, before we get into actually animating SVGs, 02:36.990 --> 02:39.590 we're not going to be going into the technicalities of how 02:39.590 --> 02:41.890 to create an animation in CSS. 02:41.890 --> 02:45.120 But we're going to be talking about how to add CSS in SVG 02:45.120 --> 02:48.080 first, and then a few buts and gotchas that you should know 02:48.080 --> 02:50.920 if you're going to use CSS that will hopefully save you 02:50.920 --> 02:52.370 some headaches. 02:52.370 --> 02:55.750 So, SVG 1.1 did not require any CSS, 02:55.750 --> 02:59.020 and therefore it was necessary to present the styles of an SVG 02:59.020 --> 03:01.720 using what is known as presentation attributes. 03:01.720 --> 03:04.150 A presentation attribute is a shorthand way 03:04.150 --> 03:07.150 for setting a CSS property on an SVG element. 03:07.150 --> 03:09.770 You can think of them as special style attributes, 03:09.770 --> 03:12.530 and they even contribute to the style cascade. 03:12.530 --> 03:16.866 So, examples are, in all of the slides that contain any code, 03:16.866 --> 03:19.240 the code in blue is the one that I will be talking about, 03:19.240 --> 03:22.980 and that you know you don't have to focus on the rest. 03:22.980 --> 03:26.020 So we have width, height, fill, stroke, and stroke-width 03:26.020 --> 03:28.470 are examples of presentation attributes. 03:28.470 --> 03:31.310 Now, there are a lot of presentation attributes in SVG 03:31.310 --> 03:32.920 that do all kinds of stuff. 03:32.920 --> 03:35.500 But only a subset of these presentation attributes 03:35.500 --> 03:37.720 can be set in CSS. 03:37.720 --> 03:40.990 The table onscreen shows all of the attributes 03:40.990 --> 03:43.430 that we can set using CSS. 03:43.430 --> 03:46.375 Only a subset of the attributes that can be set using CSS 03:46.375 --> 03:49.530 are already present in CSS as CSS properties. 03:49.530 --> 03:53.120 Like, we have opacity, font families, visibility. 03:53.120 --> 03:55.150 So, I want you to hold this thought here, 03:55.150 --> 03:57.890 because I'm going to refer to it later in the talk. 03:57.890 --> 04:00.520 So, a subset of presentation attribute 04:00.520 --> 04:03.130 is already present as CSS properties. 04:03.130 --> 04:04.810 Now, there are certain attributes, 04:04.810 --> 04:08.430 like width and height and position attributes, X-Y-Z, 04:08.430 --> 04:11.270 X-Z-Y, we cannot set them in CSS yet. 04:11.270 --> 04:14.640 But in SVG 2, this list, the list 04:14.640 --> 04:17.640 of attributes that can be set in CSS, is going to be extended. 04:17.640 --> 04:20.790 And more attributes, we will be able to set them in CSS. 04:20.790 --> 04:23.650 So for a full list, you can refer to this link. 04:23.650 --> 04:26.860 It's being updated, and implementations are 04:26.860 --> 04:29.340 being worked on at the time. 04:29.340 --> 04:32.600 So, because attributes can be set as CSS properties, 04:32.600 --> 04:35.890 it's now to talk about how you can CSS to SVG. 04:35.890 --> 04:39.930 You can first add them inline inside a style attribute, 04:39.930 --> 04:41.370 just like you would with HTML. 04:41.370 --> 04:44.540 Notice how the fill, stroke, and stroke-width attributes 04:44.540 --> 04:47.330 are now used as CSS properties. 04:47.330 --> 04:50.850 You can also add the styles in a style tag inside the SVG. 04:50.850 --> 04:53.740 In this case, you will select the element 04:53.740 --> 04:58.580 that you're styling using type selectors, like the polygon, ID 04:58.580 --> 05:01.290 selectors, class selectors, all kinds of selectors-- 05:01.290 --> 05:03.192 kind of, except a few. 05:03.192 --> 05:04.650 And you would style them like this. 05:04.650 --> 05:07.870 You can also include the styles in a style tag outside the SVG 05:07.870 --> 05:11.710 if you're embedding the SVG inline, in an HTML document. 05:11.710 --> 05:13.560 And if you want to completely separate 05:13.560 --> 05:15.030 the styles from the structure, you 05:15.030 --> 05:17.380 can reference an external style sheet. 05:17.380 --> 05:17.880 OK. 05:17.880 --> 05:24.590 So, I'm covering these because-- we'll talk about this shortly. 05:24.590 --> 05:26.650 So animating SVGs with CSS. 05:26.650 --> 05:28.314 It's pretty much the same as HTML. 05:28.314 --> 05:29.980 I'm not going to be saying anything new. 05:29.980 --> 05:33.030 If you've worked, animated HTML before, 05:33.030 --> 05:36.470 there's only a few things that are going to be new. 05:36.470 --> 05:37.860 Everything else is the same. 05:37.860 --> 05:40.630 So you can apply CSS transitions to an element in SVG, 05:40.630 --> 05:42.220 just like you would with HTML. 05:42.220 --> 05:45.180 I have an example here from the iconic icon set. 05:45.180 --> 05:46.900 We have a lamp. 05:46.900 --> 05:50.270 The bulb is generally first initially gray. 05:50.270 --> 05:52.902 And when you hover it, you just select the bulb. 05:52.902 --> 05:54.360 You can select individual elements. 05:54.360 --> 05:56.901 See in the dev tools, you can see and select the elements one 05:56.901 --> 05:57.520 by one. 05:57.520 --> 05:59.490 You just select it, apply a style, and hover. 05:59.490 --> 06:03.364 What we're doing here is the stroke-width has increased. 06:03.364 --> 06:04.280 It's becoming thicker. 06:04.280 --> 06:06.240 The color is changing from gray to yellow, 06:06.240 --> 06:09.640 and we're adding a light gradient background. 06:09.640 --> 06:12.090 So, this is a simple transition effect. 06:12.090 --> 06:13.490 A lot more can be created. 06:13.490 --> 06:15.160 But basically, CSS transitions are 06:15.160 --> 06:17.950 applied to SVG just like HTML. 06:17.950 --> 06:20.260 But most kinds of animations that you're 06:20.260 --> 06:22.920 going to apply to SVG are going to probably contain 06:22.920 --> 06:26.360 some kind of transformation, be it rotation, scaling, skewing, 06:26.360 --> 06:28.060 translation. 06:28.060 --> 06:31.580 Now, SVG responds to the transform and transform origin 06:31.580 --> 06:33.980 property just like HTML does. 06:33.980 --> 06:36.590 But there is a major difference between SVG and HTML, 06:36.590 --> 06:39.850 which leads to another major difference with transforms. 06:39.850 --> 06:42.480 You see, an HTML element has a box model. 06:42.480 --> 06:45.390 So it has a margin box, border box, padding box, 06:45.390 --> 06:46.820 and content box. 06:46.820 --> 06:49.326 And if you're working with coordinate systems on an HTML 06:49.326 --> 06:50.700 element, the coordinate system is 06:50.700 --> 06:55.280 established on one of these boxes of the box model. 06:55.280 --> 06:57.880 But in SVG, an SVG element does not 06:57.880 --> 06:59.620 know the concept of a box model. 06:59.620 --> 07:00.990 There is no box model. 07:00.990 --> 07:03.860 So, if we're going to talk about the transform origin 07:03.860 --> 07:07.410 property in CSS, the default value 07:07.410 --> 07:10.750 is 50% by 50%, which is the center of the element 07:10.750 --> 07:12.570 that you're going to be animating. 07:12.570 --> 07:15.590 In SVG, the default value is 0-0, 07:15.590 --> 07:18.490 which is the top left corner of the SVG canvas, 07:18.490 --> 07:21.340 not the top left corner of the element. 07:21.340 --> 07:24.520 So, if we have an element, we have 07:24.520 --> 07:28.060 an HTML element on the left and a rectangle inside an SVG 07:28.060 --> 07:28.940 canvas on the right. 07:28.940 --> 07:31.810 And if we rotate both of them by 45 degrees, 07:31.810 --> 07:34.370 the HTML element is going to be rotated around its center, 07:34.370 --> 07:36.410 but the SVG is going to be rotated like that. 07:36.410 --> 07:39.400 And this is probably not what you want. 07:39.400 --> 07:43.554 So if you're not going to do any rotations, 07:43.554 --> 07:45.970 the default transform origin is not going to be a problem. 07:45.970 --> 07:48.010 But if you are going to do rotations, 07:48.010 --> 07:50.880 you're probably going to want to change the transform origin. 07:50.880 --> 07:53.330 Now, to set a transform origin on an SVG element, 07:53.330 --> 07:55.100 you can set it using one of two ways-- 07:55.100 --> 07:57.630 either using percentage values, the origin 07:57.630 --> 08:00.400 is going to set relative to the SVG 08:00.400 --> 08:02.857 relative to the element's bounding box, which 08:02.857 --> 08:03.690 includes the stroke. 08:03.690 --> 08:06.550 You can think of the bounding box as the smallest box 08:06.550 --> 08:08.260 that you can draw around the element-- 08:08.260 --> 08:10.700 and also include the stroke in it. 08:10.700 --> 08:12.330 So a percentage value is going to be 08:12.330 --> 08:15.930 relative to this virtual bounding box. 08:15.930 --> 08:20.250 And you can also use absolute values like pixels and ems. 08:20.250 --> 08:22.980 But if you use pixels or any other absolute value, 08:22.980 --> 08:25.640 it's going to be set relative to the entire SVG canvas. 08:25.640 --> 08:28.360 So if we were to go back to the previous example 08:28.360 --> 08:31.640 and set the transform origin to 50% by 50%, 08:31.640 --> 08:34.200 it's going to become-- the center of the SVG element 08:34.200 --> 08:36.380 is going to be rotated as we expected. 08:36.380 --> 08:37.250 Yea. 08:37.250 --> 08:41.730 However, we don't always get all rainbows and ponies 08:41.730 --> 08:43.799 in web development, right? 08:43.799 --> 08:47.350 Some browser has to make a pain out of everything. 08:47.350 --> 08:49.460 So, there is a bug in Firefox. 08:49.460 --> 08:51.876 Basically you cannot set-- it doesn't work if you set 08:51.876 --> 08:53.250 the transform origin percentages, 08:53.250 --> 08:54.666 it's not going to work in Firefox. 08:54.666 --> 08:55.624 It's a bug. 08:55.624 --> 08:57.290 It's been around for a really long time. 08:57.290 --> 08:58.530 It hasn't been fixed yet. 08:58.530 --> 09:01.510 So for now, if you're going to rotate something in SVG 09:01.510 --> 09:03.717 and you want to set the center to-- you 09:03.717 --> 09:06.300 want to set the transform origin to the center of the element, 09:06.300 --> 09:08.580 just use absolute values. 09:08.580 --> 09:11.940 This is a simple example, a pinwheel, rotating pinwheel. 09:11.940 --> 09:14.500 I've used both percentage values and pixel values 09:14.500 --> 09:16.280 to make it work in both browsers. 09:16.280 --> 09:18.970 And then you can use the CSS animation 09:18.970 --> 09:22.100 property and key frames, just like you would with HTML. 09:22.100 --> 09:23.940 So the only thing that you should know 09:23.940 --> 09:25.860 is about the transform origin, because I've 09:25.860 --> 09:28.640 gotten a lot of questions and I bumped into this myself 09:28.640 --> 09:29.440 at first. 09:29.440 --> 09:32.370 Like, I have an animation on an SVG element. 09:32.370 --> 09:34.370 It should work, but it's not working in Firefox. 09:34.370 --> 09:35.370 What's the problem? 09:35.370 --> 09:38.240 Well, it usually is that they're using percentage values 09:38.240 --> 09:41.270 and not providing a pixel value or an absolute value 09:41.270 --> 09:43.730 for Firefox. 09:43.730 --> 09:44.230 OK. 09:44.230 --> 09:45.480 So we can do a lot of stuff. 09:45.480 --> 09:47.070 We can animate SVGs with CSS. 09:47.070 --> 09:47.640 That's great. 09:47.640 --> 09:50.760 But SVG comes short in a lot of ways. 09:50.760 --> 09:53.260 There are certain things, limitations to CSS, 09:53.260 --> 09:57.090 that you still cannot do things with CSS. 09:57.090 --> 09:59.600 One of these things is animations 09:59.600 --> 10:01.530 of attributes such as position and dimension 10:01.530 --> 10:03.440 attributes among many others. 10:03.440 --> 10:06.410 Remember how we mentioned before that not all of the attributes 10:06.410 --> 10:07.610 can be set in CSS. 10:07.610 --> 10:10.320 So there are certain effects that we will simply not 10:10.320 --> 10:10.930 be able to do. 10:10.930 --> 10:12.630 Even shrinking and expanding an element, 10:12.630 --> 10:14.980 we won't be able to do it in CSS for now. 10:14.980 --> 10:17.850 It's going to change in the future. 10:17.850 --> 10:20.010 Animations along arbitrary paths-- 10:20.010 --> 10:22.860 we currently can't do that in CSS, but implementations, 10:22.860 --> 10:26.760 I think, should start in November or so. 10:26.760 --> 10:29.110 So we will be able to do this hopefully next year, 10:29.110 --> 10:30.660 because now we have a specification, 10:30.660 --> 10:32.600 a link to the specification at the bottom, 10:32.600 --> 10:34.500 which is called motion path, which 10:34.500 --> 10:39.400 is going to allow us to move elements along paths using CSS. 10:39.400 --> 10:42.450 And then we have morphing paths, or shape tweening. 10:42.450 --> 10:44.520 Now, the reason we can't morph paths 10:44.520 --> 10:46.152 is the same reason as the first one, 10:46.152 --> 10:47.610 because in order to animate a path, 10:47.610 --> 10:49.610 you're going to have to animate the path data. 10:49.610 --> 10:50.760 In order to animate the path data, 10:50.760 --> 10:52.300 you're going to have to animate the D attribute. 10:52.300 --> 10:53.500 In order to animate the D attribute, 10:53.500 --> 10:55.208 you're going to have to set it using CSS, 10:55.208 --> 10:57.140 and you can't do that. 10:57.140 --> 10:58.610 That was deliberate, by the way. 10:58.610 --> 11:02.020 So you can't morph paths in CSS. 11:02.020 --> 11:05.340 So CSS comes short in a lot of places. 11:05.340 --> 11:07.760 So you will have to use either SMIL or JavaScript 11:07.760 --> 11:10.020 to do some of these things. 11:10.020 --> 11:11.510 We'll talk about those shortly. 11:11.510 --> 11:14.860 But before that, I want to go over embedding SVGs. 11:14.860 --> 11:17.090 The reason I'm going to talk about embedding SVGs 11:17.090 --> 11:18.700 in a talk that's about animations 11:18.700 --> 11:20.720 is that the way you embed your SVG 11:20.720 --> 11:23.870 is going to determine whether or not the CSS animations 11:23.870 --> 11:26.480 and interactions, such as hover interactions, 11:26.480 --> 11:28.970 are actually going to work or not. 11:28.970 --> 11:32.070 Depending on the technique you use, they may not work. 11:32.070 --> 11:35.490 So SVGs can be embedded in six ways, the first one using 11:35.490 --> 11:36.710 an image tag. 11:36.710 --> 11:39.710 If you're using an image tag to embed your SVG, 11:39.710 --> 11:41.970 CSS animations are only going to work if they 11:41.970 --> 11:43.960 are defined inside the SVG. 11:43.960 --> 11:45.960 So if you're referencing an external style sheet 11:45.960 --> 11:47.793 and you have animations in that style sheet, 11:47.793 --> 11:49.080 they're not going to work. 11:49.080 --> 11:51.430 Interactions, hover interactions, for example, 11:51.430 --> 11:53.020 no, they're not going to work. 11:53.020 --> 11:54.870 You can't interact with an image tag. 11:54.870 --> 11:58.080 The same thing applies for a CSS background image, 11:58.080 --> 12:00.790 an SVG applied as a CSS background image. 12:00.790 --> 12:04.530 And you can also embed an SVG using an object tag. 12:04.530 --> 12:06.500 The object tag is your best choice 12:06.500 --> 12:09.810 if you're going to add some kind of scripting, like JavaScript. 12:09.810 --> 12:13.110 JavaScript does not work at all-- animations, interactions, 12:13.110 --> 12:13.630 nothing. 12:13.630 --> 12:16.210 No scripting works for the first two techniques. 12:16.210 --> 12:18.680 But the object tag is the best way 12:18.680 --> 12:20.730 to embed an SVG for JavaScript. 12:20.730 --> 12:23.300 It also comes with a default fallback mechanism. 12:23.300 --> 12:26.070 If you can provide text fallback or an image fallback, 12:26.070 --> 12:29.560 fall back to a PNG, for example, between the opening and closing 12:29.560 --> 12:30.790 tags. 12:30.790 --> 12:32.310 Now, if you're using the object tag, 12:32.310 --> 12:34.330 animations and interactions are both 12:34.330 --> 12:38.100 going to work only if they're specified inside the SVG. 12:38.100 --> 12:41.570 Same thing as the object tag for the embed tag. 12:41.570 --> 12:43.979 And also the same thing for the iframe except-- well, 12:43.979 --> 12:46.270 there are differences between iframe and the object tag 12:46.270 --> 12:47.853 and advantages for one over the other, 12:47.853 --> 12:49.430 but I'm not going to cover those now. 12:49.430 --> 12:51.138 But it also comes with a default fallback 12:51.138 --> 12:52.890 mechanism, which is a plus. 12:52.890 --> 12:54.710 And the last way you can embed an SVG 12:54.710 --> 12:56.930 is inline in an HTML document. 12:56.930 --> 13:00.230 In this case, both animations and interactions 13:00.230 --> 13:03.260 are going to work whether they are specified inside the SVG 13:03.260 --> 13:04.980 or outside it. 13:04.980 --> 13:05.480 OK. 13:05.480 --> 13:09.990 So animating SVG with SMIL. 13:09.990 --> 13:12.170 First, let's define SMIL. 13:12.170 --> 13:14.310 It's obviously an abbreviation for-- this 13:14.310 --> 13:16.050 is the most boring slide of the talk-- 13:16.050 --> 13:18.500 Synchronized Multimedia Integration Language, 13:18.500 --> 13:21.870 which is a specification that has many design goals. 13:21.870 --> 13:25.150 Some of these goals is to define an XML-based language that 13:25.150 --> 13:27.440 allows authors to write interactive multimedia 13:27.440 --> 13:30.870 presentations, and then being able to reuse 13:30.870 --> 13:34.430 those interactions in other XML-based languages, 13:34.430 --> 13:37.780 such as XHTML and SVG. 13:37.780 --> 13:40.070 OK, so why would you want to use SMIL? 13:40.070 --> 13:44.290 If you're going to take anything out of this talk, 13:44.290 --> 13:45.860 it's probably going to be this. 13:45.860 --> 13:48.014 We can animate SVGs using CSS. 13:48.014 --> 13:50.180 And if there's something that cannot be done in CSS, 13:50.180 --> 13:51.680 it can be done in JavaScript. 13:51.680 --> 13:54.270 So why would you want to use SMIL? 13:54.270 --> 13:58.340 Well, the reason is that SMIL has some advantages over CSS. 13:58.340 --> 14:02.430 And one important advantage-- so far, for now-- over JavaScript, 14:02.430 --> 14:05.050 the first one is that we can animate attributes that CSS 14:05.050 --> 14:05.550 can't. 14:05.550 --> 14:06.690 We can morph shapes. 14:06.690 --> 14:09.920 We can move elements along motion paths in SMIL. 14:09.920 --> 14:11.700 We can't do that in CSS. 14:11.700 --> 14:15.220 We have awesome event handling and animation synchronization 14:15.220 --> 14:17.650 capabilities, which we're going to see next. 14:17.650 --> 14:19.510 And the advantage over JavaScript 14:19.510 --> 14:23.210 is that if you're embedding an SVG using an image tag or a CSS 14:23.210 --> 14:25.870 background image, SMIL animations are going to work, 14:25.870 --> 14:28.480 but JavaScript are not. 14:28.480 --> 14:31.090 So you can choose between CSS and SMIL and JavaScript, 14:31.090 --> 14:33.110 but depending on what you're doing, 14:33.110 --> 14:34.660 depending on the embedding technique, 14:34.660 --> 14:37.990 depending-- it just depends on the scenario, on the use case. 14:37.990 --> 14:41.370 And SMIL can be more useful than CSS and JavaScript 14:41.370 --> 14:42.650 in this case. 14:42.650 --> 14:45.390 Current browser support-- emphasis on current-- 14:45.390 --> 14:48.510 is that they are supported in all browsers except IE, 14:48.510 --> 14:51.200 no version of IE, and Opera Mini. 14:51.200 --> 14:54.100 You can provide fallback for browsers using JavaScript 14:54.100 --> 14:54.950 if you need. 14:54.950 --> 14:57.520 Animation is just part of-- like, 14:57.520 --> 15:00.870 a progressive enhancement, and you may not 15:00.870 --> 15:02.550 need to provide fallback. 15:02.550 --> 15:04.490 And if you do, you can use JavaScript. 15:04.490 --> 15:08.140 And emphasis on current, because this may change any day. 15:08.140 --> 15:11.590 We may not see SMIL in Chrome-- maybe sometime in the future. 15:11.590 --> 15:14.310 And we may see it implemented in IE. 15:14.310 --> 15:18.430 So this is subject to change. 15:18.430 --> 15:20.470 Now, the best part about SVG is that it's 15:20.470 --> 15:22.710 made of human readable tags. 15:22.710 --> 15:24.609 So this is going to make me feel-- it already 15:24.609 --> 15:26.900 makes me feel a little useless trying to explain what's 15:26.900 --> 15:29.441 going to come next, because a lot of what you're going to see 15:29.441 --> 15:31.660 is pretty much self-explanatory. 15:31.660 --> 15:35.389 We have four elements to animate stuff in SVG and SMIL. 15:35.389 --> 15:36.930 The first one is the animate element, 15:36.930 --> 15:38.730 which is used to animate scalar attributes 15:38.730 --> 15:41.420 over a period of time, like color and positions. 15:41.420 --> 15:43.160 The second one is the animate transform, 15:43.160 --> 15:45.970 used to animate transforms, rotations, scaling, 15:45.970 --> 15:47.190 translation. 15:47.190 --> 15:49.270 And then we have the animate motion element, 15:49.270 --> 15:51.450 which is obviously used to animate 15:51.450 --> 15:52.990 an element along a path. 15:52.990 --> 15:54.510 And then we have the set element, 15:54.510 --> 15:59.190 which is used to assign values for a certain period of time. 15:59.190 --> 16:02.155 You don't transition or animate from one value to another. 16:02.155 --> 16:04.060 You just set a value for a period of time. 16:04.060 --> 16:05.380 We're going to see an example. 16:05.380 --> 16:09.887 Now, we used to have-- SVG 1.1 did include one more 16:09.887 --> 16:11.720 element, which is the animate color element, 16:11.720 --> 16:14.500 and it was used to animate colors, obviously. 16:14.500 --> 16:16.170 But because you can animate colors 16:16.170 --> 16:18.750 using the animate element, animate color 16:18.750 --> 16:20.350 became kind of useless and redundant. 16:20.350 --> 16:23.009 So it was deprecated and removed from SVG 2. 16:23.009 --> 16:25.550 So if you see animate color used anywhere, just don't use it. 16:25.550 --> 16:27.936 Replace it with animate. 16:27.936 --> 16:29.072 OK, naming animations. 16:29.072 --> 16:31.030 We're going to start with an animation element, 16:31.030 --> 16:32.425 using animate element. 16:32.425 --> 16:34.050 First thing you can do for an animation 16:34.050 --> 16:36.130 is to give it a name using the id attribute. 16:36.130 --> 16:37.590 But this is not necessary. 16:37.590 --> 16:39.465 You don't need it to make the animation work. 16:39.465 --> 16:41.780 But it will be useful when you're synchronizing 16:41.780 --> 16:44.510 animations, when you want one animation to start 16:44.510 --> 16:46.060 or end based on another animation, 16:46.060 --> 16:48.520 you're going to use the name. 16:48.520 --> 16:50.760 Again, you don't need to set it. 16:50.760 --> 16:52.660 Specifying the target of the animation-- OK, 16:52.660 --> 16:54.220 so you have an animation element. 16:54.220 --> 16:55.880 You want to animate something with it. 16:55.880 --> 16:57.460 What are you going to animate? 16:57.460 --> 17:00.560 You can specify the target (using the xlink)href attribute, 17:00.560 --> 17:04.089 which takes the ID of an element and then it just applies 17:04.089 --> 17:05.200 the animation to it. 17:05.200 --> 17:08.300 But if you've used SMIL before or you've read about it 17:08.300 --> 17:13.108 somewhere, you've probably seen it done in another way. 17:13.108 --> 17:16.240 Actually, I haven't seen any tutorial online or article 17:16.240 --> 17:17.910 that's used the (xlink)href attribute. 17:17.910 --> 17:23.319 All of the others used-- yeah, OK. 17:23.319 --> 17:24.710 One good note. 17:24.710 --> 17:27.240 The target element has to be part of the same document 17:27.240 --> 17:28.180 fragment. 17:28.180 --> 17:31.790 You cannot define an animation in a document that references 17:31.790 --> 17:33.990 an element in another document. 17:33.990 --> 17:35.780 It would've been nice if it was possible, 17:35.780 --> 17:37.488 because then we could separate animations 17:37.488 --> 17:42.100 from the actual document, but it's not possible. 17:42.100 --> 17:44.890 So they have to be in the same document. 17:44.890 --> 17:47.864 The other way is you can nest the animation 17:47.864 --> 17:50.030 element inside the element that you want to animate. 17:50.030 --> 17:53.410 This is how you will probably see it done online. 17:53.410 --> 17:56.020 Now, the reason this works per specification, 17:56.020 --> 17:58.760 as the specification says, is that if you don't specify 17:58.760 --> 18:00.867 the target using the (xlink)href attribute, 18:00.867 --> 18:03.200 the browser is just going to look for the first ancestor 18:03.200 --> 18:06.670 of the animation element and apply the animation to that. 18:06.670 --> 18:08.870 So this is the only reason why nesting works. 18:08.870 --> 18:11.454 You can use this if you want to do some kind of encapsulation, 18:11.454 --> 18:13.619 like you want to keep the animation with the element 18:13.619 --> 18:14.170 itself. 18:14.170 --> 18:15.630 And if you want to separate them, 18:15.630 --> 18:19.870 you can just reference it (using the xlink)href attribute. 18:19.870 --> 18:21.740 Specifying the target attribute-- OK, 18:21.740 --> 18:22.810 so we have an element. 18:22.810 --> 18:23.726 We want to animate it. 18:23.726 --> 18:26.240 What about it do you want to animate? 18:26.240 --> 18:28.030 Using the attribute name, you're going 18:28.030 --> 18:30.500 to specify the name of the attribute. 18:30.500 --> 18:32.300 In this case, I have cx, which is 18:32.300 --> 18:36.077 the definition of the center of a circle along the x-axis. 18:36.077 --> 18:38.160 All of these examples are going to be very simple, 18:38.160 --> 18:40.170 and just a circle moving around. 18:40.170 --> 18:41.790 And then we have the attribute type. 18:41.790 --> 18:45.010 Remember how I said earlier that some of the SVG attributes 18:45.010 --> 18:48.110 are already present as CSS properties? 18:48.110 --> 18:51.060 Well, if an attribute is present as a CSS property, 18:51.060 --> 18:53.540 you specify the attribute type to CSS. 18:53.540 --> 18:55.790 If it's SVG only, you use XML. 18:55.790 --> 18:58.989 If you use auto or you don't specify the attribute type 18:58.989 --> 19:01.280 at all, the browser is going to look in both namespaces 19:01.280 --> 19:05.330 and pick the one that it finds suitable. 19:05.330 --> 19:08.340 One note here is that you can only specify 19:08.340 --> 19:09.727 one attribute per animation. 19:09.727 --> 19:11.810 So if you want to animate more than one attribute, 19:11.810 --> 19:13.990 you're going to have to specify more than one animation 19:13.990 --> 19:14.170 element. 19:14.170 --> 19:16.600 You're going to have to define more than one animation. 19:16.600 --> 19:20.581 This isn't-- you know, I wish we could define more than one, 19:20.581 --> 19:22.580 but it kind of makes sense considering the other 19:22.580 --> 19:24.910 attributes. 19:24.910 --> 19:27.070 So, to define a very simple animation, 19:27.070 --> 19:29.940 just moving a circle from one position to the other, 19:29.940 --> 19:33.350 we can do that using-- OK, the circle is not moving. 19:33.350 --> 19:36.820 OK, it's just going to move by 400 pixels from the left 19:36.820 --> 19:37.840 to the right. 19:37.840 --> 19:40.900 We have the from attribute, the to attribute, 19:40.900 --> 19:43.270 initial value, final value, dur, which 19:43.270 --> 19:46.140 is the duration, which takes an amount of time, 19:46.140 --> 19:47.560 and then the fill attribute. 19:47.560 --> 19:50.150 The fill attribute takes one of two values, remove or freeze. 19:50.150 --> 19:53.130 Remove is the default value, and freeze is basically 19:53.130 --> 19:55.080 you specify the end state of the animation. 19:55.080 --> 19:57.859 Do you want that the element to go back to its initial position 19:57.859 --> 19:59.400 when the animation is over, or do you 19:59.400 --> 20:02.670 want it to stay where it's now? 20:02.670 --> 20:05.660 So using freeze, you can literally freeze the animation. 20:05.660 --> 20:08.510 Now, the fill attribute is unfortunately named the same 20:08.510 --> 20:10.890 as the fill attribute, which is used to specify the fill 20:10.890 --> 20:12.970 color in SVG. 20:12.970 --> 20:14.882 The fill attribute in SVG is generally 20:14.882 --> 20:16.340 used to specify a fill color, which 20:16.340 --> 20:18.339 is kind of like a background color or something, 20:18.339 --> 20:20.140 depending on what you're using it for. 20:20.140 --> 20:23.204 So this is the same name, but don't confuse the two. 20:23.204 --> 20:25.120 If you're using animations, the fill attribute 20:25.120 --> 20:30.160 is used to specify the end state of the animation. 20:30.160 --> 20:32.660 The CSS equivalent to the previous 20:32.660 --> 20:35.300 is animation-duration, animation-fill-mode, 20:35.300 --> 20:37.360 which specifies it's the same as the fill 20:37.360 --> 20:40.370 attribute, and then the from and to key frames. 20:40.370 --> 20:42.650 Now, I realize that if you're using CSS animations, 20:42.650 --> 20:44.970 you're probably going to use-- if you're using CSS, 20:44.970 --> 20:47.300 you're probably going to use CSS transition. 20:47.300 --> 20:50.310 What's wrong with me? 20:50.310 --> 20:52.640 You're going to use CSS transitions to move 20:52.640 --> 20:54.000 from one value to another. 20:54.000 --> 20:55.890 You don't have to define from and to, just 20:55.890 --> 20:57.004 two key frames to do that. 20:57.004 --> 20:58.670 But in SMIL, there is no differentiation 20:58.670 --> 21:00.044 between transition and animation. 21:00.044 --> 21:02.150 So just to show an equivalent, I did this. 21:02.150 --> 21:05.780 But you would use transitions in CSS instead. 21:05.780 --> 21:08.210 Repeating animations-- SMIL comes with two 21:08.210 --> 21:11.630 attributes-- I told you this talk is going to be technical. 21:11.630 --> 21:13.580 SMIL comes with two attributes that 21:13.580 --> 21:17.230 allow you to control repetition and for an animation. 21:17.230 --> 21:20.050 The first one is repeat count, which you can obviously 21:20.050 --> 21:22.740 specify how many times that you want the animation to repeat, 21:22.740 --> 21:25.050 or you can set it to indefinite, which means that it's 21:25.050 --> 21:26.700 going to repeat infinitely. 21:26.700 --> 21:30.660 And the repeat duration, which specifies how much you can 21:30.660 --> 21:32.230 restrict the repetition time. 21:32.230 --> 21:34.500 This can be useful if-- well, suppose, for example, 21:34.500 --> 21:36.730 you have an ad banner made from SVG. 21:36.730 --> 21:39.430 And you know, everyone knows that ads are annoying, OK. 21:39.430 --> 21:41.166 But you know that motion is going 21:41.166 --> 21:42.790 to grab the user's attention, so if you 21:42.790 --> 21:44.314 use some kind of animation, you're 21:44.314 --> 21:45.980 going to grab their attention to the ad. 21:45.980 --> 21:47.510 You may get clicks, whatever. 21:47.510 --> 21:48.894 But it can get really annoying. 21:48.894 --> 21:50.560 Like, imagine you're reading an article, 21:50.560 --> 21:53.380 and there's something constantly moving on the right side bar. 21:53.380 --> 21:54.450 That's annoying. 21:54.450 --> 21:56.010 So you can restrict that. 21:56.010 --> 21:59.830 You can have the animation repeat for five minutes or so. 21:59.830 --> 22:02.330 The repeat duration takes a clock value, 22:02.330 --> 22:04.500 which is pretty cool actually. 22:04.500 --> 22:07.790 You can set it to 0-1-30-00. 22:07.790 --> 22:10.240 Like, you want the repetition to only last 22:10.240 --> 22:12.640 for an hour and 30 minutes, which doesn't make 22:12.640 --> 22:14.610 sense, but just an example. 22:14.610 --> 22:15.840 So this is very useful. 22:15.840 --> 22:18.450 In CSS, we have an equivalent to specify 22:18.450 --> 22:20.420 the number of repetitions, but we do not 22:20.420 --> 22:24.767 have a way to specify the repetition duration. 22:24.767 --> 22:26.350 Controlling animation and begin time-- 22:26.350 --> 22:28.790 this is where you start with event handling. 22:28.790 --> 22:31.360 And this is where the values start to get more interesting. 22:31.360 --> 22:33.480 So, the begin value is obviously used 22:33.480 --> 22:37.010 to specify when you want your animation to begin. 22:37.010 --> 22:38.180 It takes a lot of values. 22:38.180 --> 22:39.950 I'm going to show examples next. 22:39.950 --> 22:41.705 The restart attribute is useful-- 22:41.705 --> 22:44.080 well, suppose you have an animation that starts on click. 22:44.080 --> 22:46.060 And then while the animation is playing, 22:46.060 --> 22:47.536 the user decides to click it again. 22:47.536 --> 22:48.660 It's just going to restart. 22:48.660 --> 22:49.743 This is the default value. 22:49.743 --> 22:51.372 It's always going to restart. 22:51.372 --> 22:52.330 So you can change that. 22:52.330 --> 22:54.930 You can set it to never repeat, or you 22:54.930 --> 22:57.140 can set it to only repeat when not active. 22:57.140 --> 23:00.440 Like, when the animation ends, OK, you can restart it. 23:00.440 --> 23:02.660 CSS equivalent, none. 23:02.660 --> 23:05.280 We don't have a click event in CSS. 23:05.280 --> 23:06.800 We don't have event handling in CSS. 23:06.800 --> 23:10.360 And don't tell me that we can do that using the checkbox hack. 23:10.360 --> 23:11.700 It is what it is-- it's a hack. 23:11.700 --> 23:14.950 We don't have event handling in CSS, and that's a good thing. 23:14.950 --> 23:19.810 We do have, like, hover active focus, but no click. 23:19.810 --> 23:23.200 Synchronizing animations-- so we have a begin attribute. 23:23.200 --> 23:25.630 We also have an end attribute, which 23:25.630 --> 23:28.020 takes the same values as the begin attribute. 23:28.020 --> 23:30.520 So what values can you set begin? 23:30.520 --> 23:32.600 How can you specify the beginning time? 23:32.600 --> 23:36.590 We have click-- OK. 23:36.590 --> 23:39.460 We have click, focus, and a list of other events 23:39.460 --> 23:41.800 that you can check in the specification. 23:41.800 --> 23:43.290 You have click plus two seconds. 23:43.290 --> 23:45.748 I want the animation to start two seconds after the element 23:45.748 --> 23:46.570 has been clicked. 23:46.570 --> 23:49.310 Click plus an hour and five minutes and 33 seconds. 23:49.310 --> 23:51.730 You can go crazy with these. 23:51.730 --> 23:55.580 Indefinite, you specify the begin time in JavaScript. 23:55.580 --> 23:57.870 We also have-- this is where the synchronization part. 23:57.870 --> 24:00.080 Remember, I said that you can name an animation 24:00.080 --> 24:02.920 so that you can use the name when you're synchronizing. 24:02.920 --> 24:04.710 So in this example, other animation 24:04.710 --> 24:06.710 is just the name of another animation. 24:06.710 --> 24:08.810 So you can set that I want my animation 24:08.810 --> 24:12.060 to begin when the other animation begins, or I want 24:12.060 --> 24:15.550 my animation to begin one second before one minute or one second 24:15.550 --> 24:17.950 before the other animation ends. 24:17.950 --> 24:21.510 We also have a repeat function among many others, actually. 24:21.510 --> 24:24.210 We also have a repeat function which allows you to-- like, 24:24.210 --> 24:25.940 I want my animation, this element, 24:25.940 --> 24:29.010 to start animating at the 10th repetition 24:29.010 --> 24:30.440 of the other element. 24:30.440 --> 24:32.677 This may not look very useful if you're just 24:32.677 --> 24:34.260 thinking about circles and rectangles, 24:34.260 --> 24:35.950 like you're going to see next. 24:35.950 --> 24:38.769 But it is useful when you have a scene 24:38.769 --> 24:40.310 and you have a lot of things going on 24:40.310 --> 24:41.900 and you want to synchronize between them. 24:41.900 --> 24:43.483 So what I have here is a circle that's 24:43.483 --> 24:45.820 changing color indefinitely. 24:45.820 --> 24:47.820 When I click the circle, the color animation 24:47.820 --> 24:49.650 is going to stop. 24:49.650 --> 24:52.700 The rectangle is going to start animating one second 24:52.700 --> 24:54.429 after the animation of the circle starts, 24:54.429 --> 24:55.970 and the circle is just going to move. 24:55.970 --> 24:58.040 So click it, it starts moving. 24:58.040 --> 25:00.010 One second after that, the rectangle is moving. 25:04.580 --> 25:06.900 This is the code for the previous example. 25:06.900 --> 25:10.420 Just look at the ones in blue, because they specify the event 25:10.420 --> 25:13.420 handling, and the orange is just the name of the animation. 25:13.420 --> 25:17.150 So we have the second animation which changes the fill color. 25:17.150 --> 25:20.460 In begins when the move animation-- 25:20.460 --> 25:22.955 it ends when the first animation begins. 25:22.955 --> 25:26.910 So you can do all kinds of synchronizations with this. 25:26.910 --> 25:29.380 Controlling animation key frame values and pacing-- now, 25:29.380 --> 25:31.296 this is where things start to get interesting. 25:31.296 --> 25:34.616 If you're just moving an element or just animating 25:34.616 --> 25:36.740 from one value to another, it's pretty much simple. 25:36.740 --> 25:40.270 We had a from value and a to value, and that was enough. 25:40.270 --> 25:42.660 But what if you want intermediate values? 25:42.660 --> 25:47.060 In CSS, you can split the animation time into key frames 25:47.060 --> 25:50.360 or actually can specific certain times or key times 25:50.360 --> 25:53.330 inside an animation, and then you give your element, 25:53.330 --> 25:55.832 whatever, a value for every key frame. 25:55.832 --> 25:57.790 Like, for example, if you have a bouncing ball, 25:57.790 --> 26:00.576 it's going to start up here, and it's going to come down there. 26:00.576 --> 26:01.950 If it's just a simple transition, 26:01.950 --> 26:03.400 it's just going to translate down. 26:03.400 --> 26:05.400 It's not going to be-- it's not going to bounce. 26:05.400 --> 26:06.500 If you want it to bounce, you're going 26:06.500 --> 26:09.390 to start with one value, two, three, four, five, six, seven, 26:09.390 --> 26:11.030 eight, depending on how much you want. 26:11.030 --> 26:12.670 So you're going to have to specify 26:12.670 --> 26:14.230 the intermediate values. 26:14.230 --> 26:18.480 In CSS you do that, using key frames in blue, 26:18.480 --> 26:21.550 using the value specifying a value for each key frame, 26:21.550 --> 26:22.970 the ones in green. 26:22.970 --> 26:27.640 In orange, we have the timing function. 26:27.640 --> 26:31.130 You can control the pacing of an animation per key frame 26:31.130 --> 26:33.340 using custom easing in CSS. 26:33.340 --> 26:37.530 Now, I deliberately did this-- I talked about CSS before SMIL 26:37.530 --> 26:40.660 because what helped me understand 26:40.660 --> 26:44.390 SMIL pacing and this kind of animation 26:44.390 --> 26:47.310 was when I just compared it to CSS, because other than that, 26:47.310 --> 26:50.380 the attributes didn't make a lot of sense for me at first. 26:50.380 --> 26:52.940 So this is the SMIL equivalent. 26:52.940 --> 26:55.600 We have a values attribute which takes 26:55.600 --> 26:57.902 a list of values-- the beginning value, 26:57.902 --> 27:00.110 the end value in the end, and any intermediate values 27:00.110 --> 27:00.610 in between. 27:00.610 --> 27:04.020 It's a list of semicolon separated values. 27:04.020 --> 27:05.830 And then we have the key times, which are 27:05.830 --> 27:07.380 equivalent to the key frames. 27:07.380 --> 27:09.180 But instead of setting them in percentages, 27:09.180 --> 27:14.050 you're setting them as ratios, fractions between 0 and 1. 27:14.050 --> 27:15.670 And then you have the key splines. 27:15.670 --> 27:18.130 I'm going to talk about this again later. 27:18.130 --> 27:21.460 The key splines are basically just the timing functions. 27:21.460 --> 27:23.774 And the calc mode attribute is necessary. 27:23.774 --> 27:25.440 You're going to have to set it to spline 27:25.440 --> 27:27.970 if you're going to use any kind of custom easing. 27:27.970 --> 27:29.610 For an animation, you're going to have 27:29.610 --> 27:32.022 to set the calc mode to spline. 27:32.022 --> 27:34.770 Calc mode takes one of four values-- linear, the animation 27:34.770 --> 27:36.960 is going to be linear. 27:36.960 --> 27:42.030 Discrete is similar to the steps function in CSS. 27:42.030 --> 27:45.427 Paste is similar to linear, but with some differences. 27:45.427 --> 27:47.260 I'm not going to mention those because there 27:47.260 --> 27:48.050 would need more time. 27:48.050 --> 27:49.091 And then you have spline. 27:49.091 --> 27:52.560 If you use spline, then you can use custom easing 27:52.560 --> 27:54.570 in your animation. 27:54.570 --> 27:56.580 Key times are fractions, not percentages, 27:56.580 --> 27:57.710 as mentioned before. 27:57.710 --> 27:59.940 The number of key times equal the number of values, 27:59.940 --> 28:00.500 of course. 28:00.500 --> 28:02.650 For every key time, you specify a value, 28:02.650 --> 28:06.210 but the number of key splines is less. 28:06.210 --> 28:08.320 So basically, it makes a lot more sense for me 28:08.320 --> 28:09.780 in SMIL than it does in CSS. 28:09.780 --> 28:15.180 Like, if you want only three key times-- 0%, 50%, and 100%, 28:15.180 --> 28:17.010 then you have two intervals. 28:17.010 --> 28:19.930 You specify a custom function, a custom easing for each 28:19.930 --> 28:21.330 of these two intervals. 28:21.330 --> 28:24.810 Three key times, two intervals enhance two key splines. 28:24.810 --> 28:26.870 The number of key splines or custom functions 28:26.870 --> 28:29.650 is one less than the number of key times. 28:29.650 --> 28:31.750 This makes more sense for me because, you know, 28:31.750 --> 28:34.517 key times make intervals, and you specify custom easing 28:34.517 --> 28:35.100 for intervals. 28:35.100 --> 28:36.780 In CSS, it's not like that. 28:36.780 --> 28:40.150 And the key splines use control points and not the busier 28:40.150 --> 28:40.650 function. 28:40.650 --> 28:42.552 So this is better explained here. 28:42.552 --> 28:44.510 In CSS, if you're going to set a custom easing, 28:44.510 --> 28:48.140 you're going to use the function at the bottom. 28:48.140 --> 28:51.070 In SVG or in SMIL, instead of using the functional notation, 28:51.070 --> 28:54.230 you just use the coordinates inside of it. 28:54.230 --> 28:57.290 So if we were to go back here, the key splines 28:57.290 --> 29:00.170 are just coordinates of the control points 29:00.170 --> 29:03.690 and are semicolon separated. 29:03.690 --> 29:09.180 I think that the code is a lot clearer than what I just said. 29:12.311 --> 29:12.810 OK. 29:12.810 --> 29:16.020 So this is the ball animation. 29:16.020 --> 29:20.890 Click it, and this how it-- all of the intermediate values 29:20.890 --> 29:24.770 and custom easing has been defined using SMIL. 29:24.770 --> 29:27.600 We have an animate example. 29:27.600 --> 29:30.650 So as I mentioned before, you can animate things in SMIL that 29:30.650 --> 29:32.510 you cannot animate using CSS. 29:32.510 --> 29:34.690 One of these things is the path data. 29:34.690 --> 29:37.124 So if you have a path that has a circular shape, 29:37.124 --> 29:39.290 and you want to animate it into a rectangular shape, 29:39.290 --> 29:42.540 for example, like this-- credit for this example 29:42.540 --> 29:43.560 goes to Noah Blon. 29:43.560 --> 29:45.530 He has an article on CodePen that explains 29:45.530 --> 29:47.100 exactly how this is done. 29:47.100 --> 29:50.070 So basically how it is done is, you have a path. 29:50.070 --> 29:53.330 You start with a value which is a circular shape. 29:53.330 --> 29:54.880 The data defines a circular shape. 29:54.880 --> 29:57.880 And then you have the final data defines a rectangular shape. 29:57.880 --> 30:00.620 And in between, you have a triangular shape. 30:00.620 --> 30:02.790 So the way you do that, the way you animate from one 30:02.790 --> 30:05.590 shape to another, is using the animate function. 30:05.590 --> 30:08.980 The attribute name is D. You're animating the D attribute, 30:08.980 --> 30:10.430 the data of the path. 30:10.430 --> 30:12.660 And then you just give it a set of values 30:12.660 --> 30:16.170 that you want it to go over, and it just animates from the first 30:16.170 --> 30:20.100 to the last going through the intermediate ones. 30:20.100 --> 30:22.390 Path tweening, shape tweening in SMIL 30:22.390 --> 30:25.100 is very simple, as you can see. 30:25.100 --> 30:28.740 And if you want a full tutorial, refer to Noah's article 30:28.740 --> 30:29.710 on CodePen. 30:29.710 --> 30:33.380 animateTransform animation-- so the animateTransform element, 30:33.380 --> 30:35.770 you specify that the attribute name that you're 30:35.770 --> 30:38.690 going to animate is the transform attribute, obviously. 30:38.690 --> 30:42.197 And then instead of-- well, transforms, 30:42.197 --> 30:43.530 there's a lot to say about them. 30:43.530 --> 30:46.600 So let's see how I can summarize that. 30:46.600 --> 30:48.650 So instead of giving-- you have a from value 30:48.650 --> 30:49.909 and you have a two value. 30:49.909 --> 30:51.700 You're animating from one value to another. 30:51.700 --> 30:54.300 I'm not going to be getting into intermediate values now. 30:54.300 --> 30:58.220 So instead of starting with a rotate function 30:58.220 --> 31:00.730 and then ending with a rotate function, 31:00.730 --> 31:02.630 you're going to specify the type of rotation 31:02.630 --> 31:05.592 in the type attribute, the type of the transformation 31:05.592 --> 31:06.550 and the type attribute. 31:06.550 --> 31:08.174 If you're doing a rotation, use rotate. 31:08.174 --> 31:10.740 If you're doing a translation, use translate, et cetera. 31:10.740 --> 31:14.320 And then in the from and to-- how do I say that? 31:14.320 --> 31:17.150 The values are the same values that you are going 31:17.150 --> 31:20.540 to use in the rotate function. 31:20.540 --> 31:23.000 I know I'm not making any sense at all. 31:23.000 --> 31:24.490 So if you want to know everything 31:24.490 --> 31:27.430 about SVG transformations, you can refer to this article. 31:27.430 --> 31:30.420 It's a long article I've written, part of a big guide. 31:30.420 --> 31:32.970 Everything you need to know-- syntax, values, 31:32.970 --> 31:36.090 how they affect the coordinate systems in SVG, 31:36.090 --> 31:38.960 everything-- refer to this article. 31:38.960 --> 31:41.070 A set animation example-- what I'm doing here 31:41.070 --> 31:45.050 is this is a rotating square again. 31:45.050 --> 31:48.210 So what I'm doing is just I want to set the color to blue 31:48.210 --> 31:49.560 for three seconds. 31:49.560 --> 31:51.204 You can, of course, set visibility 31:51.204 --> 31:52.120 and many other things. 31:52.120 --> 31:54.040 Get creative as much as you want. 31:54.040 --> 31:54.970 Click it. 31:54.970 --> 31:57.270 It's set to blue for three seconds, 31:57.270 --> 31:59.652 and then it's back to pink. 31:59.652 --> 32:00.860 There are a lot of use cases. 32:00.860 --> 32:05.650 This is just the simplest kinds of examples I'm using here. 32:05.650 --> 32:09.930 Animation along arbitrary paths-- well, 32:09.930 --> 32:11.550 using the animateMotion, you're going 32:11.550 --> 32:13.100 to animate an element along a path. 32:13.100 --> 32:14.060 But in order to do that, you're going 32:14.060 --> 32:16.190 to have to specify the path that you want 32:16.190 --> 32:17.870 the element to take, right? 32:17.870 --> 32:20.580 So there are two ways you can specify a path-- either using 32:20.580 --> 32:25.090 the path attribute here, which just takes the data of a path, 32:25.090 --> 32:27.550 the syntax is very similar to the D attribute. 32:27.550 --> 32:29.300 You just give it a path data, and it's 32:29.300 --> 32:31.500 going to use that to animate an element. 32:31.500 --> 32:33.950 Or the other way has an advantage. 32:33.950 --> 32:35.939 If you use this one on the left, the path 32:35.939 --> 32:36.980 is not going to be drawn. 32:36.980 --> 32:38.396 So you just have an element that's 32:38.396 --> 32:40.140 just going to animate along some path. 32:40.140 --> 32:42.200 But this one has an advantage here is that you 32:42.200 --> 32:44.230 can use the end path element. 32:44.230 --> 32:46.780 It's nested inside the animateMotion element. 32:46.780 --> 32:51.170 And it refers to a path that is defined somewhere else. 32:51.170 --> 32:54.167 So the path-- like the one at the bottom here, 32:54.167 --> 32:56.000 it's rendered on the screen you can see it-- 32:56.000 --> 32:58.190 and then you want the element to animate along it. 32:58.190 --> 33:00.240 Now, there is actually a lot to say 33:00.240 --> 33:01.670 about animations along motion. 33:01.670 --> 33:05.900 I'm going to just the basics, but more details 33:05.900 --> 33:06.810 will be coming soon. 33:06.810 --> 33:09.170 I'll tell you about those at the end of the talk. 33:09.170 --> 33:13.230 So in this example, if I'm using the path attribute, 33:13.230 --> 33:14.970 the circle is just going to animate along 33:14.970 --> 33:18.270 a path without you being able to see what the path is. 33:18.270 --> 33:20.830 And with the second example, I'm referencing 33:20.830 --> 33:22.700 a path that already exists, and then I'm 33:22.700 --> 33:24.650 animating the circle along that path. 33:24.650 --> 33:27.830 But what if what you're animating has orientation? 33:27.830 --> 33:31.010 Like, what if you're animating a car? 33:31.010 --> 33:33.100 This is the default behavior. 33:33.100 --> 33:38.290 If you have a car and you're animating it-- you know. 33:38.290 --> 33:39.840 So what we're going to have to do 33:39.840 --> 33:42.298 is we're going to have to change the orientation of the car 33:42.298 --> 33:46.707 so that it adapts to the shape of the path. 33:46.707 --> 33:49.040 We're going to have to change the orientation of the car 33:49.040 --> 33:50.840 so that it adapts to the path. 33:50.840 --> 33:53.480 So in order to do that, we have the rotate attribute. 33:53.480 --> 33:55.700 The rotate attribute, if you set it to auto, 33:55.700 --> 33:58.150 the browser is going to change the orientation so that it 33:58.150 --> 33:59.610 matches that of the path. 33:59.610 --> 34:01.742 So we've gone one step further here, 34:01.742 --> 34:03.200 but the circle is animating inside. 34:03.200 --> 34:04.470 I want it outside. 34:04.470 --> 34:06.860 So in order to do that, you can change the value. 34:06.860 --> 34:10.050 You can use the auto reverse, which is basically the same. 34:10.050 --> 34:11.679 It's going to adjust the orientation, 34:11.679 --> 34:15.530 but it's also going to flip the car by 180 degrees. 34:15.530 --> 34:17.310 But for those of you with a sharp eye, 34:17.310 --> 34:20.270 you're going to notice that the car is moving backwards. 34:20.270 --> 34:22.179 So in order to move it forwards, we're 34:22.179 --> 34:24.465 going to use transforms to flip it again. 34:24.465 --> 34:26.909 You know, in CSS and in SMIL, if you 34:26.909 --> 34:30.250 scale an element by minus 1, it's not going to be scaled. 34:30.250 --> 34:31.350 It's going to be flipped. 34:31.350 --> 34:34.060 So in order to flip the car, I'm going to transform it, 34:34.060 --> 34:35.583 and we end up with this. 34:35.583 --> 34:37.969 [APPLAUSE] 34:43.710 --> 34:48.080 Animating text along arbitrary paths is a little different. 34:48.080 --> 34:50.830 We're not going to be using-- this is the last example, so 34:50.830 --> 34:52.400 just hang on a little bit. 34:52.400 --> 34:54.520 Animating text along an arbitrary path 34:54.520 --> 34:56.020 is different because we're not going 34:56.020 --> 34:57.645 to be using the animate motion element. 34:57.645 --> 35:00.037 We're going to be going back to the animate element. 35:00.037 --> 35:01.620 So the way you do that is first, we're 35:01.620 --> 35:03.540 going to put the text on an actual path. 35:03.540 --> 35:06.640 To do that, we're going to use the text path, 35:06.640 --> 35:09.420 conveniently named, of course, as everything else. 35:09.420 --> 35:11.290 It's going to reference a path. 35:11.290 --> 35:15.445 And then it's going to place the text inside it on that path. 35:15.445 --> 35:15.945 Cool? 35:15.945 --> 35:17.611 OK, so the next thing we're going to do, 35:17.611 --> 35:21.020 we're just going to animate the text offset. 35:21.020 --> 35:23.625 So instead of starting at the beginning of the path, 35:23.625 --> 35:25.210 it's just going to be animating. 35:25.210 --> 35:27.210 So this is what we end up with. 35:27.210 --> 35:29.700 I've used some custom easing just so that it slows down 35:29.700 --> 35:31.026 at the end. 35:31.026 --> 35:35.480 And that's all you need to animate text along a path. 35:35.480 --> 35:37.610 I'm going to go over embedding techniques again, 35:37.610 --> 35:38.680 not over each one. 35:38.680 --> 35:41.520 The table has already seen-- but just 35:41.520 --> 35:44.730 to show that SMIL animations are going to work in all cases. 35:44.730 --> 35:48.810 The only thing that's not going to work is the interactions. 35:48.810 --> 35:50.970 Click interactions, hover, anything-- nothing's 35:50.970 --> 35:53.550 going to work when the SVG is embedded as an image 35:53.550 --> 35:55.710 tag or a CSS background image. 35:55.710 --> 35:58.470 Basically, image tag and CSS background image 35:58.470 --> 36:00.480 do not accept any kind of interactivity, 36:00.480 --> 36:03.990 be it CSS, SMIL, or JavaScript. 36:03.990 --> 36:06.440 And before I say thank you, I know 36:06.440 --> 36:10.250 that I said a lot of things that I could have elaborated on. 36:10.250 --> 36:13.650 There are a lot of details, a lot of gotchas and stuff. 36:13.650 --> 36:15.660 So this talk used to be very long. 36:15.660 --> 36:16.770 I had to shrink it a lot. 36:16.770 --> 36:20.559 I'm not sure if I'm overtime already. 36:20.559 --> 36:22.350 So I'm going to be sharing-- after my talk, 36:22.350 --> 36:23.850 I'm going to be sharing this version 36:23.850 --> 36:25.040 and the extended version. 36:25.040 --> 36:30.490 And we have something-- I've written a 9,500-words guide. 36:30.490 --> 36:33.634 It's all about SMIL animations, all the details that you want. 36:33.634 --> 36:35.050 We're going to publish it probably 36:35.050 --> 36:36.490 on Monday on CSS-Tricks. 36:36.490 --> 36:39.086 So if you're following me, Chris Coyier, or CSS-Tricks, 36:39.086 --> 36:40.210 you're going to be updated. 36:40.210 --> 36:43.300 If not, I'm going to tweet the link to the article 36:43.300 --> 36:45.530 with the fronteers14 hashtag. 36:45.530 --> 36:48.480 So if you want, you can check that article out later. 36:48.480 --> 36:49.409 And now, thank you. 36:49.409 --> 36:51.365 [APPLAUSE] 36:59.189 --> 37:00.380 That was incredible. 37:00.380 --> 37:02.200 That was like on the matrix. 37:02.200 --> 37:02.900 Boring. 37:02.900 --> 37:03.400 No. 37:03.400 --> 37:04.930 No, that was like being in the Matrix. 37:04.930 --> 37:06.971 I had the thing plugged into the back of my head, 37:06.971 --> 37:09.910 and it was just like that, and I was like, I know SVG. 37:09.910 --> 37:12.430 Wow. 37:12.430 --> 37:15.660 So, what drew you to SVG? 37:15.660 --> 37:17.160 It's something that's been-- I mean, 37:17.160 --> 37:18.410 it's been around for ages, and it's 37:18.410 --> 37:19.850 been on my to-do list to learn. 37:19.850 --> 37:21.900 And I've never really, really got there. 37:21.900 --> 37:25.270 What drew you to SVG? 37:25.270 --> 37:27.350 Well, I started seeing it everywhere. 37:27.350 --> 37:29.890 Like, especially when it came to Icon Fonts, 37:29.890 --> 37:31.390 and everyone was like, OK, Icon Font 37:31.390 --> 37:33.961 doesn't look or behave really great on retina screens, 37:33.961 --> 37:34.460 or whatever. 37:34.460 --> 37:36.540 So everyone was starting to use SVGs. 37:36.540 --> 37:38.622 And I had no clue about SVG. 37:38.622 --> 37:39.580 I didn't know anything. 37:39.580 --> 37:42.080 So I had it on my to-do list for months. 37:42.080 --> 37:44.270 And then I had a talk at CSS-Conf, 37:44.270 --> 37:46.910 and I wasn't very excited about the talk topic that I had. 37:46.910 --> 37:49.190 So I decided, OK, what better way 37:49.190 --> 37:51.227 to get excited about something new 37:51.227 --> 37:53.060 and learn something new about the same time. 37:53.060 --> 37:55.740 So I changed the topic to be about styling and animating 37:55.740 --> 37:59.850 SVGs, started researching, and I got hooked. 37:59.850 --> 38:02.212 So you decided just to throw away your talk 38:02.212 --> 38:04.670 and you thought, well, I'm just going to learn SVG and then 38:04.670 --> 38:05.270 write a talk on it? 38:05.270 --> 38:05.500 Yes. 38:05.500 --> 38:06.291 That's incredible. 38:06.291 --> 38:07.450 OK, fair enough. 38:07.450 --> 38:13.840 That's very, very-- what's the state of performance in SVG? 38:13.840 --> 38:15.430 Do we have hardware acceleration, 38:15.430 --> 38:18.390 and how can I deal with performance issues? 38:18.390 --> 38:21.190 CSS animations-- this used to be part of the talk 38:21.190 --> 38:22.580 before I deleted it. 38:22.580 --> 38:26.481 CSS 3D-- you can use CSS 3D transforms on SVGs, 38:26.481 --> 38:28.480 but they are not hardware accelerated in Chrome. 38:28.480 --> 38:30.325 There is some hardware acceleration 38:30.325 --> 38:32.990 in Firefox, but not in Chrome. 38:32.990 --> 38:36.200 That's when it comes to animations and transforms. 38:36.200 --> 38:40.310 Performance is a very wide topic, actually. 38:40.310 --> 38:43.320 Depending on the technique you use and depending on the SVG, 38:43.320 --> 38:45.760 the content of the SVG, it may be fast, may be slow. 38:45.760 --> 38:48.634 It may be good on desktop, it may be bad on mobile. 38:48.634 --> 38:50.550 So the first thing I'm going to do-- actually, 38:50.550 --> 38:52.120 it's the first thing on my to-do list 38:52.120 --> 38:53.620 after this conference-- is I'm going 38:53.620 --> 38:57.070 to be doing a lot of performance tests, 38:57.070 --> 38:59.670 and I'm going to be sharing those as soon as I have them. 38:59.670 --> 39:01.830 Are there particular performance gotchas? 39:01.830 --> 39:03.720 Are there properties to watch out for, 39:03.720 --> 39:07.650 whether it's animation or just rendering in general? 39:07.650 --> 39:08.150 No. 39:08.150 --> 39:10.850 I think it's just rendering in general. 39:10.850 --> 39:14.370 Is there a way-- do the profiling tools in browsers, 39:14.370 --> 39:16.739 do they pick up on this stuff? 39:16.739 --> 39:17.780 Could you rephrase that? 39:17.780 --> 39:19.590 Sorry. 39:19.590 --> 39:25.560 In Dev Tools, in browsers, are they SVG aware? 39:25.560 --> 39:26.870 Well, in what sense? 39:26.870 --> 39:29.920 Like, if you have an SVG, it's just going to-- well, 39:29.920 --> 39:32.220 the only profiling that I've done 39:32.220 --> 39:35.430 was just to see the loading time, because all I did was, 39:35.430 --> 39:36.490 I replaced an SVG. 39:36.490 --> 39:38.600 I was referencing it inside an image tag, 39:38.600 --> 39:42.430 and so I decided to reference it in CSS, using Base64. 39:42.430 --> 39:45.430 And it slowed my page load time by one second. 39:45.430 --> 39:48.540 So that's the only thing that I saw in the dev tools. 39:48.540 --> 39:50.860 But I'm going to be using webpagetest.org, 39:50.860 --> 39:53.710 and Paolo is-- he's going to be helping me with this. 39:53.710 --> 39:55.190 I learn a lot from him. 39:55.190 --> 39:58.200 It feels like we maybe need browsers to step up 39:58.200 --> 40:01.380 a little bit in terms of telling us which parts of the SVG 40:01.380 --> 40:02.800 are causing issues. 40:02.800 --> 40:05.570 Yes, definitely. 40:05.570 --> 40:09.260 Internet Explorer, actually, with IE9, they really 40:09.260 --> 40:12.379 impressed me with their SVG rendering. 40:12.379 --> 40:13.420 Like, it was really fast. 40:13.420 --> 40:15.540 It seemed like they'd pull a lot of thought 40:15.540 --> 40:19.930 into the performance side. 40:19.930 --> 40:23.516 But they didn't do smile, or SMIL, however it's pronounced. 40:23.516 --> 40:24.890 Why did they drop the ball there? 40:24.890 --> 40:26.070 Was it deliberate? 40:26.070 --> 40:28.910 I don't know. 40:28.910 --> 40:31.870 Any idea if they've got plans to do anything with that? 40:31.870 --> 40:35.100 Well, you know that page where you give feedback about the 40:35.100 --> 40:37.380 features that you want to see implemented in IE, 40:37.380 --> 40:39.810 SMIL animations are one of the most requested ones. 40:39.810 --> 40:41.440 So we may see them implemented. 40:41.440 --> 40:44.110 That's why I had the emphasis on current browser support. 40:44.110 --> 40:45.300 It may change any time. 40:45.300 --> 40:45.800 Yeah. 40:45.800 --> 40:50.260 I was surprised to see how SVG animations were 40:50.260 --> 40:53.820 so high compared to, say, the web animation 40:53.820 --> 40:55.660 spec that we heard yesterday. 40:55.660 --> 40:58.270 How does the stuff you were talking about 40:58.270 --> 41:00.410 interact with the web animation stuff 41:00.410 --> 41:02.670 that we heard from Rachel yesterday? 41:02.670 --> 41:05.040 Well, I'm not very familiar with the details 41:05.040 --> 41:06.726 of the web animations API. 41:06.726 --> 41:08.100 The only thing that I knew, which 41:08.100 --> 41:10.850 I learned from a conversation with you and [INAUDIBLE] 41:10.850 --> 41:12.859 a while back, is that the web animation 41:12.859 --> 41:14.650 is going to provide-- it's going to be kind 41:14.650 --> 41:18.030 of like a common denominator. 41:18.030 --> 41:20.500 It's not actually going to replace SMIL. 41:20.500 --> 41:22.300 SMIL is declarative. 41:22.300 --> 41:24.270 Web animations are going to be imperative. 41:24.270 --> 41:27.430 And well, I still don't know about the future 41:27.430 --> 41:30.760 because I've never compared the two. 41:30.760 --> 41:32.021 So I don't know. 41:32.021 --> 41:34.270 Plus web animations are going to be using a JavaScript 41:34.270 --> 41:35.980 interface, and those are still not going 41:35.980 --> 41:40.080 to work in an image tag or CSS background image. 41:40.080 --> 41:41.860 So SMIL still has an advantage over that. 41:41.860 --> 41:42.360 Right. 41:42.360 --> 41:47.550 Because is it right that if your SVG is inside an image tag 41:47.550 --> 41:51.660 or-- there are particular cases where JavaScript doesn't run. 41:51.660 --> 41:52.400 Which cases? 41:52.400 --> 41:54.480 The image tag and the CSS background image. 41:54.480 --> 41:54.980 OK. 41:54.980 --> 41:57.430 But if it's an object or an iframe-- 41:57.430 --> 41:58.580 JavaScript worked. 41:58.580 --> 42:01.289 Actually, there's a question that just occurred to me. 42:01.289 --> 42:03.330 Maybe you'll have the answer, because I certainly 42:03.330 --> 42:04.500 don't have the answer. 42:04.500 --> 42:09.700 When would you use an object tag versus an iframe verses inline, 42:09.700 --> 42:11.560 I guess, for SVG? 42:11.560 --> 42:14.000 Well, inline, the first thing that 42:14.000 --> 42:15.440 comes to my mind about and inline 42:15.440 --> 42:20.010 is I would use it if the SVG-- well, the SVG itself 42:20.010 --> 42:22.630 is not really big, because some SVGs are really big, 42:22.630 --> 42:26.050 and I wouldn't want to clutter my HTML with it. 42:26.050 --> 42:27.620 And again, as I mentioned before, 42:27.620 --> 42:29.220 it depends on what you're doing. 42:29.220 --> 42:33.775 So if you can, if the best way to implement it and animate 42:33.775 --> 42:37.450 it is using inline without cluttering, just use inline. 42:37.450 --> 42:40.750 The object tag versus iframe, they are very much similar. 42:40.750 --> 42:43.900 But I think that-- I don't use iframes a lot, honesty. 42:43.900 --> 42:47.750 But I read that if you're using an iframe, manipulating 42:47.750 --> 42:49.799 the SVG from the main document, JavaScript 42:49.799 --> 42:51.090 is going to be a little harder. 42:51.090 --> 42:54.760 So object tag has an advantage in this way. 42:54.760 --> 42:58.760 So, taking an experience I had from Lanyard, 42:58.760 --> 43:01.070 I had what I thought was a great idea, that I was going 43:01.070 --> 43:04.310 to replace all of the-- for different conferences, 43:04.310 --> 43:06.934 we got the flag of the country the conference is from. 43:06.934 --> 43:08.850 I thought if I'm going to replace all of those 43:08.850 --> 43:11.360 with SVG, because that's going to be better 43:11.360 --> 43:14.852 and it's going to work on a screen of any resolution. 43:14.852 --> 43:16.810 But I got tripped up because-- and I can't even 43:16.810 --> 43:19.760 remember what country it was, but one country 43:19.760 --> 43:22.390 had their flag has, in the middle of it, 43:22.390 --> 43:24.710 a crest which has a lion. 43:24.710 --> 43:27.470 And on the lion's neck, there is a flea. 43:27.470 --> 43:29.720 And then the flea has a very complex crown. 43:29.720 --> 43:31.640 And it was so much detail that this one 43:31.640 --> 43:34.340 flag was a megabyte in size. 43:34.340 --> 43:38.440 When you decide to use a PNG versus SVG? 43:38.440 --> 43:41.810 Well, I guess that if the SVG is simple, 43:41.810 --> 43:45.110 there isn't a lot of markup and a lot of information in it, 43:45.110 --> 43:46.960 then it may be better than a PNG. 43:46.960 --> 43:49.826 But if the SVG contains a lot of details and a lot of markup, 43:49.826 --> 43:50.950 it can become really heavy. 43:50.950 --> 43:53.490 So PNG would be a better alternative. 43:53.490 --> 43:57.250 So SVG has-- you can create definitions 43:57.250 --> 44:00.610 for particular things, such as animations and gradients. 44:00.610 --> 44:02.777 And you can also have paths as being part of that. 44:02.777 --> 44:04.610 And you were saying that you referenced that 44:04.610 --> 44:07.670 from the documents, but it has to be the same document. 44:07.670 --> 44:11.680 If the SVGs are inline, can I reference between them, 44:11.680 --> 44:14.890 or is it still very much a sandbox environment? 44:14.890 --> 44:18.940 Well, if the SVG is inline, well, the animation 44:18.940 --> 44:21.080 would still be inside the SVG, right? 44:21.080 --> 44:22.000 So it would work. 44:22.000 --> 44:26.900 So if I had two inline SVGs on my page, 44:26.900 --> 44:30.299 I could reference the animation from A to B? 44:30.299 --> 44:30.840 I'm not sure. 44:30.840 --> 44:31.990 I think it works in Chrome, but I 44:31.990 --> 44:34.531 don't know if we're breaking the specification by doing that. 44:34.531 --> 44:36.610 If you have two inline SVGs and you're 44:36.610 --> 44:39.510 referencing an element from the other SVG in the-- I 44:39.510 --> 44:40.490 haven't tried that. 44:40.490 --> 44:42.400 Yeah, as I say, I think it works in Chrome, 44:42.400 --> 44:42.970 but I don't know if that's-- 44:42.970 --> 44:43.900 I have to try that. 44:43.900 --> 44:47.190 I don't know if it's a good thing that we do that. 44:47.190 --> 44:51.580 Which features of SMIL do we need in HTML? 44:51.580 --> 44:54.150 Like the quickest, if you were giving a priority to them, 44:54.150 --> 44:56.120 what do we need to be able to apply 44:56.120 --> 45:01.445 to arbitrary HTML elements via CSS, or whatever makes sense? 45:01.445 --> 45:02.820 I don't understand the question. 45:02.820 --> 45:03.361 No, it's OK. 45:03.361 --> 45:06.230 I kind of talked all over that. 45:06.230 --> 45:09.730 If there's a feature you could take from SMIL now 45:09.730 --> 45:15.620 into normal HTML, so you could apply it to other elements-- 45:15.620 --> 45:17.810 Motion along a path would be my first guess. 45:17.810 --> 45:21.190 But we will have it in CSS sometime later. 45:21.190 --> 45:24.560 So maybe path tweening, because I'm not really sure 45:24.560 --> 45:27.350 what the issue is and why specifying and using 45:27.350 --> 45:29.800 paths in CSS is still not implemented. 45:29.800 --> 45:32.250 I'm not sure if it will be, or if it will, when. 45:32.250 --> 45:34.450 So moving that into HTML would be cool. 45:34.450 --> 45:38.436 Defining and using paths in HTML would be powerful. 45:38.436 --> 45:40.060 One of the things I hadn't seen before 45:40.060 --> 45:43.170 was the declarative way of activating animations 45:43.170 --> 45:45.270 based on events. 45:45.270 --> 45:48.860 Is it possible to trigger one element animating 45:48.860 --> 45:50.460 from clicking another element? 45:50.460 --> 45:51.860 Yes. 45:51.860 --> 45:52.630 How is that done? 45:52.630 --> 45:54.641 Is there a separate attribute for that? 45:54.641 --> 45:56.140 Well, there is the begin attribute. 45:56.140 --> 45:57.931 And it depends on the values that it takes. 45:57.931 --> 46:00.080 It takes event values, and you can combine 46:00.080 --> 46:01.350 those with clock values. 46:01.350 --> 46:07.026 And you can also use-- well, what exactly do you want to do? 46:07.026 --> 46:08.900 Begin an animation when the other one begins? 46:08.900 --> 46:11.880 Well, more that if I click on the blue circle, 46:11.880 --> 46:15.560 the green rectangle starts rotating. 46:15.560 --> 46:16.060 OK. 46:16.060 --> 46:19.390 So you want the blue circle to animate too, or not? 46:19.390 --> 46:20.070 No. 46:20.070 --> 46:20.569 OK. 46:20.569 --> 46:22.620 No, in that case, I don't think that's possible, 46:22.620 --> 46:24.870 because you can synchronize an animation based 46:24.870 --> 46:27.960 on another animation, not based on another event, 46:27.960 --> 46:28.750 as far as I know. 46:28.750 --> 46:29.760 I may be wrong. 46:29.760 --> 46:32.850 I wonder if you could hack that behavior by creating, 46:32.850 --> 46:35.840 like, an empty animation on the circle. 46:35.840 --> 46:37.420 I guess, would that work? 46:37.420 --> 46:39.090 That's a pretty cool idea. 46:39.090 --> 46:41.400 Yeah, if you wanted to-- because I suppose 46:41.400 --> 46:43.760 the benefit of making it declarative like that is 46:43.760 --> 46:46.570 it would work in an image element. 46:46.570 --> 46:48.195 Actually, is that true? 46:48.195 --> 46:51.409 If you've included your SVG in just an image tag, 46:51.409 --> 46:52.700 does it get that interactivity? 46:52.700 --> 46:54.340 Do you still get the click effects? 46:54.340 --> 46:54.840 No. 46:54.840 --> 46:55.810 Interactions, no. 46:55.810 --> 46:57.340 You can't interact with it. 46:57.340 --> 46:58.590 So even if it's declarative-- 46:58.590 --> 47:00.090 Even if it's SMIL, it's not going to work. 47:00.090 --> 47:00.590 OK. 47:00.590 --> 47:02.260 That makes sense. 47:02.260 --> 47:07.890 With shape tweening-- I'm actually from a Flash 47:07.890 --> 47:10.550 background originally. 47:10.550 --> 47:14.139 Actually, the first two talks I gave at Fronteers, my slides 47:14.139 --> 47:14.930 were made in Flash. 47:14.930 --> 47:16.300 I didn't tell many people that. 47:16.300 --> 47:20.060 But with the shape tweening, how does that work? 47:20.060 --> 47:23.280 If I'm transitioning from one shape to another, 47:23.280 --> 47:25.252 is it like the first point in the first path 47:25.252 --> 47:26.210 moves the first point-- 47:26.210 --> 47:29.539 They have to-- they need to have the same number of points, 47:29.539 --> 47:31.830 defining points, and they need to be in the same order. 47:31.830 --> 47:34.190 This is very similar to CSS shapes, actually. 47:34.190 --> 47:36.500 Because in CSS shapes, you have the shape functions. 47:36.500 --> 47:38.020 They are made up of points. 47:38.020 --> 47:40.130 And in order to animate from one shape to another, 47:40.130 --> 47:42.360 they have to have the same number of points, 47:42.360 --> 47:44.090 because the browser is actually animating 47:44.090 --> 47:45.950 the points, the coordinates of the points, 47:45.950 --> 47:48.090 and just changing their position. 47:48.090 --> 47:51.700 So if I just took, I guess, any two SVG shapes, 47:51.700 --> 47:54.050 there's a high chance that they might sort of overlap 47:54.050 --> 47:56.380 in a transition, depending on which order 47:56.380 --> 47:57.280 the path was defined. 47:57.280 --> 47:58.420 The order, yes. 47:58.420 --> 48:01.030 So if I wanted to kind of try to create 48:01.030 --> 48:04.610 a more natural animation, I guess it's down to JavaScript 48:04.610 --> 48:06.004 then to try and do point analysis 48:06.004 --> 48:07.420 and where the nearest [INAUDIBLE]. 48:07.420 --> 48:09.890 Actually, I think it wouldn't even work in JavaScript, 48:09.890 --> 48:11.530 unless the points are the same. 48:11.530 --> 48:14.990 You need to have the same number of points from the beginning 48:14.990 --> 48:16.080 to the end. 48:16.080 --> 48:17.880 It's not going to work otherwise. 48:17.880 --> 48:22.480 So when you're authoring SVG, are you 48:22.480 --> 48:23.935 in the text editor only? 48:23.935 --> 48:25.930 Or is there any kind of graphical environments? 48:25.930 --> 48:26.430 No. 48:26.430 --> 48:31.649 Well, my SVG workflow isn't exactly the perfect ones. 48:31.649 --> 48:32.690 I start with Illustrator. 48:32.690 --> 48:34.970 I have very limited Illustrator skills. 48:34.970 --> 48:37.450 I don't think I have any skills at all, actually. 48:37.450 --> 48:39.320 I keep Googling stuff that I want to do. 48:39.320 --> 48:40.220 So you create it. 48:40.220 --> 48:41.122 Then you export it. 48:41.122 --> 48:42.080 And then I optimize it. 48:42.080 --> 48:46.090 I haven't automated this yet, because the SVG optimizer tends 48:46.090 --> 48:48.450 to break SVGs if you're going to use it. 48:48.450 --> 48:53.610 So I just move the exported SVG into an online editor, 48:53.610 --> 48:56.600 I optimize it, and then I export it again 48:56.600 --> 48:57.600 as an optimized version. 48:57.600 --> 48:58.433 I open it in Chrome. 48:58.433 --> 49:00.840 And if I need to add any animations or stuff, 49:00.840 --> 49:02.400 I'll just do it in the text editor 49:02.400 --> 49:04.300 and preview it in Chrome. 49:04.300 --> 49:07.120 To be honest, I have a very similar workflow. 49:07.120 --> 49:09.882 I use Inkscape, which is not even as nice. 49:09.882 --> 49:10.590 I don't like it. 49:10.590 --> 49:11.465 Yeah, it's horrible. 49:11.465 --> 49:12.300 The lines are ugly. 49:12.300 --> 49:16.660 The one reason I use Inkscape is that the format it saves in 49:16.660 --> 49:19.710 is SVG, so I can kind of skip between the text 49:19.710 --> 49:20.882 editor and Inkscape. 49:20.882 --> 49:22.340 But you're right, the price you pay 49:22.340 --> 49:26.370 is you have to use Inkscape, which is a big price. 49:26.370 --> 49:31.200 So why are some of these presentation properties-- 49:31.200 --> 49:33.930 what made some of them presentation property only? 49:33.930 --> 49:37.080 Why did only some of them get CSS equivalent? 49:37.080 --> 49:37.760 I don't know. 49:37.760 --> 49:40.870 Some of them are still being exported into CSS. 49:40.870 --> 49:45.330 Like, CSS transforms, I actually learned that the CSS transform 49:45.330 --> 49:49.440 specification is derived from the transforms in SVG. 49:49.440 --> 49:51.970 So this is being done with a lot of other things, 49:51.970 --> 49:54.630 including their most recent one, the motion path. 49:54.630 --> 49:56.980 So work is still being done. 49:56.980 --> 50:01.330 And actually, also, if you're going to be transforming SVGs. 50:01.330 --> 50:03.730 If you're going to be chaining transformations, 50:03.730 --> 50:04.380 don't you SMIL. 50:04.380 --> 50:05.963 It's going to give you a big headache. 50:05.963 --> 50:08.620 So use CSS transforms instead. 50:08.620 --> 50:12.370 So things like path specifications, the D 50:12.370 --> 50:15.680 attribute, are we getting them in CSS as well? 50:15.680 --> 50:16.510 Not yet. 50:16.510 --> 50:17.610 I'm not sure why. 50:17.610 --> 50:21.180 Dirk and Tab were having a conversation on Twitter once. 50:21.180 --> 50:25.049 And Tab asked him, wasn't it because of the grammar 50:25.049 --> 50:26.590 that we're still not implementing it? 50:26.590 --> 50:29.580 So it's something that has to do with grammar and stuff. 50:29.580 --> 50:30.080 Yes. 50:30.080 --> 50:32.760 I find that a lot of the SVG minifies, 50:32.760 --> 50:36.750 they tend to-- they seem to prefer presentation attributes 50:36.750 --> 50:37.381 over CSS. 50:37.381 --> 50:37.880 Yes. 50:37.880 --> 50:38.860 I don't know why. 50:38.860 --> 50:39.360 OK. 50:39.360 --> 50:40.610 That was going to be my question. 50:40.610 --> 50:41.984 Because it seems to me, like, you 50:41.984 --> 50:44.914 could get a smaller file size by a better [INAUDIBLE]. 50:44.914 --> 50:47.330 I guess maybe it's just an area that hasn't been explored. 50:47.330 --> 50:48.790 I'm not sure, actually. 50:48.790 --> 50:52.040 I don't know why I would prefer presentation attributes. 50:52.040 --> 50:55.650 I would rather separate the styles from the structure. 50:55.650 --> 50:57.530 And then, this is a kind of-- 50:57.530 --> 51:01.340 Also you can have the specificity problems 51:01.340 --> 51:02.990 with presentation attributes. 51:02.990 --> 51:06.590 Like, presentation attributes is the lowest one in the cascade. 51:06.590 --> 51:08.954 It can be overridden by any other-- 51:08.954 --> 51:10.870 you would expect that a presentation attribute 51:10.870 --> 51:14.000 is more specific than inline styles, for example. 51:14.000 --> 51:15.157 But they're not. 51:15.157 --> 51:16.990 The only thing that a presentation attribute 51:16.990 --> 51:21.400 is going to orverride is browser stylesheets, default browser 51:21.400 --> 51:22.996 style sheets, and inherited styles. 51:22.996 --> 51:24.370 Other than that, they're not-- so 51:24.370 --> 51:26.880 you may end up with specificity problems 51:26.880 --> 51:28.780 if you don't know this particular thing. 51:28.780 --> 51:31.330 So even if I've applied some stuff, just linked 51:31.330 --> 51:34.990 to a class name like the lowest specificity in CSS, 51:34.990 --> 51:37.040 that's going to override the presentation styles. 51:37.040 --> 51:37.580 Yes. 51:37.580 --> 51:37.780 OK. 51:37.780 --> 51:38.300 That's amazing. 51:38.300 --> 51:40.020 That's kind of backwards of what I thought it would be. 51:40.020 --> 51:41.210 That's amazing. 51:41.210 --> 51:42.247 Thank you very much. 51:42.247 --> 51:42.830 Sara Soueidan. 51:42.830 --> 51:43.330 Thank you. 51:43.330 --> 51:45.580 [APPLAUSE]