Creative (Yet Still Useful) SVG Animation

(electronic music) - Hey everyone. Thanks again John.

I'm talking about SVG, something I really enjoy playing with.

It's a technology that I'm a bit of an advocate for in general, I think it's very useful as a designer. Specifically, we're talking about animating it with CSS. So it's a language that I have used as part of my processes now for about two years and I encourage designers and developers to start doing it more as well.

So my name's Brett.

Before we get into that, I'll talk to you a bit about myself.

I work as an Interactive Designer at Internetrix. We're a digital agency.

I mainly work there as a web designer so I'm doing graphic design work and front end development work a lot of the time. I come from a design background, studying graphic design at university, but nowadays I'm working a lot with HTML and CSS and JavaScript in my day job.

I love working with web technologies and figuring out what tools we have available to us as designers and developers, and what we can accomplish using those tools. I think SVG, to me, they've been the next frontier in that. I've found that they're very useful and incorporating them into your day-to-day work can help you do some stuff you couldn't to before with just HTML and CSS.

Today, we'll cover, first of all, what SVG is, just for those of you who aren't quite familiar yet. Raise your hands, who's using SVG in there work nowadays? So heaps.

Wow, probably more than Sydney.

Good work guys. (laughs) We'll talk about inline SVGs today.

I think there's seven methods of putting SVG images onto web pages, I think, nowadays. But inline SVG is kinda the most powerful one and I'll explain that in a minute.

We'll talk about some the elements and attributes which make up SVG, go into the nitty-gritty of how it works. And then we'll talk about styling it with CSS which is very easy.

Then, I'll go into one, kinda, flavour of CSS SVG animation which is stroke animation. Then, we'll have some fun examples to show you along the way.

So, to get into it, SVG stands for scalable vector graphics. What are they? They're a file format, they're an image file format so they're kinda similar to things like JPEG and PNG but those graphic formats are raster-based, meaning that they're made up of pixels, whereas scalable vector graphics, vector graphics are the mathematically defined paths which are resolution independent.

So they don't lose any sharpness as you zoom in on them. And that's fantastic for print work so vector graphics are a popular graphic design format for print work because if we wanna blow up a graphic to be a huge banner, we need it to be resolution independent.

And as we do responsive designs, they're also kinda perfect for us as web designers. They're created with programmes like Illustrator and Sketch so most of you might be familiar with exporting these file formats just as an image file format. Here, you have an example, just an SVG image linked by an image tag.

This is how it would display if you linked to an image tag. It just displays like a normal image.

But below that, we have that same file if you opened it in a text editor.

If you can read HTML, you can probably vaguely understand SVG immediately.

It's made out of tags and the tags describe the document. We've got things like a rect tag which is a rectangle and a rectangle appears in our image.

We've got a circle tag and that draws a circle in that image.

So it's quite easy, if you know HTML, to be able to read and vaguely understand what's happening in an SVG file.

Like I said, they're made out of tags like HTML. Those tags often have attributes on them which tell us more about the elements.

In HTML, we've got these semantically named tags so we've got things like body, divider, header, footer, they kinda describe what they do.

In SVG, it's the same idea.

We've got things like circle, which will create a circle in our image, line, rectangles, text, paths, which are like the granddaddy element which can create most other elements.

One of the great things about SVG being so similar to HTML is that you can actually paste SVG markup into your HTML page and that will render.

That's what we call embedding SVG inline in HTML. This is that method of putting them on web pages which I'm gonna advocate today.

So if we chucked in, we copy-pasted in the markup for an SVG file into our HTML page then it would render like this.

This isn't just an image, it's also then available to us in the DOM.

So we can highlight the text and we can inspect the elements and find them in our inspector.

You can see, we can apply CSS to them and we can target them with JavaScript.

So they act a lot like HTML elements which is fantastic.

If we're writing our own SVG, you don't necessarily need to use a programme, you could just write an SVG tag into your HTML and that would create an SVG.

Then that tag only requires one attribute to get it set up, which is the viewBox attribute. The viewBox attribute sets up your grid that you're gonna work with so it's kinda important. It takes four numbers.

The first two aren't particularly important so we'll kinda leave them, you can set them to 0 0 and that'll be fine. And the next two are just an X and Y value. In this case, we've given it 10 10 and that sets up a grid for us of 10 units by 10 units for us to then put elements into the tag and align them to that grid.

We can put elements into that SVG tag so we can put this line element for example in there. Then we can use attributes to align it to the grid. In this case, the line element takes an X1 and a Y1 value, and then an X2 and a Y2 value and it draws a line between those two points. Here, I've given it 2.5 and 8.5 and I've drawn a line between those two points. Polylines's a similar idea where it's just taking a series of points and drawing a line between those.

I've given it three sets of points here and it draws a line between them for me.

The elements have these, most of them, have these really simple to read syntaxes.

They can be really quite easy to remember and it's fun to be able to write your own little graphics rather than relying on programmes to generate SVG for you. If you need a little cross in your designs, it can be fun to just write one quickly and in 20 seconds you've got a little X that you can use instead of having to resort to a design programme. But of course, with more complicated vector graphics, we're gonna want to use our programmes to export them for us. So, Illustrator, Sketch, or any other programme that you might wanna use, you can usually get that vector object and export it as an SVG file using that program's tools. Then you can open that file in a text editor and grab the markup and use that in your HTML. If you're gonna do that, I'd quickly plug these optimization tools which exist.

SVGO's probably the best one that I've seen. These tools can help you optimise your SVG files because those programmes often have a lot of legacy attributes and elements in them which you don't necessarily need if you're doing inline SVG.

Using these optimization tools can help you minimise your file size and make your SVG markup more readable, which is important if you're gonna be working with it. Like I said, if we put markup for an SVG into our HTML, we can then target it with CSS.

So we can do thinks like this where I put a class on this path and then I've used CSS to target that class and I've applied some styles to the star so I've given it a white border and a black background. If you're familiar with CSS, you're probably thinking why am I using fill and stroke as opposed to background and border? SVG has its own set of presentational attributes which are a bit different to what you usually might see in CSS, things like fill and stroke. But there's not too many of these.

They're different for a reason typically which we'll get into a bit with stroke in a second. There are a few of these to kinda read and understand. But importantly, we can use CSS animations, so transition properties and animation properties. We can use them on SVG and they're gonna work perfectly fine.

We can do things like this where I'm applying a keyframe animation to this star and using CSS transforms to rotate it.

And I've got a rotating star very quickly.

So now we kinda know how to apply a CSS to SVG in our browser and we can animate using those properties, then I thought we'd go into one particular form of CSS animation which is line animation, which is this kind of effect.

You may have seen something like this where lines are being drawn or they're moving along the page.

This is probably the most popular at my work, it kinda started this trend of these drawing animations. These are all accomplished using SVGs using line animation. I mentioned that stroke's a bit different to border. There's a few different stroke properties in SVG which we can use CSS to style.

So there's stroke which changes the colour of the border or the stroke we'll call it.

There's stroke-width which the width of that stroke. There's stroke-dasharray which lets you define a series of dashes along your path.

There's stroke-dashoffset which offsets where those dashes begin along your path.

There's linecap which is the shape used to cap each of those dashes.

In this case, it's round so that's drawing a little circle on the end of each dash.

And there's linejoin which is the shape used to join corners or join two lines in your path.

That drawing effect that we're looking for, that's accomplished using stroke-dasharray and dashoffset. Like I mentioned, dasharray let's you define this repeating pattern of dashes and gaps. If I give it 56, it's gonna do a dash of 56, a gap of 56, a dash of 56, and so on.

If we can set that to the length of the full path, then we can get one dash which takes up that entire visible path.

Then we can use dash offset which moves where that dash begins and set that to the same value.

And that's gonna push the dash off the path. Then, you can imagine, all we need to do is transition that dash offset back to zero and we're gonna get that line being drawn back onto the path.

That's the principles we're gonna be using to do those animations that we saw before.

To do this, obviously, you need to find the line length, how long that path is, and there's a really simple JavaScript method you can use called getTotalLength which will return the length of the path.

Usually, it's this really complicated value like that and then you can copy and paste that into your CSS and use that.

But, if you don't wanna use JavaScript, the way I often do it is kinda similar to what I just did then where I go into my inspector and I create a dash using dasharray and I just update that value until I get a visible line taking up all the path and I use that in my CSS.

And that works just as well, we don't have to be too precise with it.

Then, we can use CSS animation or transition to do that dashoffset transition for us.

In this case, I'm just using a keyframe to transition that dash-offset back to zero and we get the line being drawn back onto the path. You can imagine, for that Xbox illustration we just saw, that it's just a matter of repeating this kind of principle a few times, finding each of the path lengths and transitioning them back to zero.

This technique, I call it line or stroke animation, I like it a lot, I use it in graphics all the time. These are two graphics that I've worked on which utilise it to do different things.

Here, it's those lines that are travelling around this map. Here, it's these squiggly lines which are moving using some transforms and stuff as well. It's generally a really useful technique for creating animated graphics.

But if you're not creating illustrative work or banners very often, I'd like to show you that it's also a very useful technique for adding a bit of style to these kind of common web patterns and design elements we see a lot of the time on our websites.

Case in point is a hamburger menu icon.

I'm not sure why but I think a lot of designers are obsessed with animating hamburger menu icons. I know I am, I like moving them into crosses. It's, like, my main pastime.

I've created this kinda ninja-looking animation using those techniques I just showed you. To do that, we start by making this.

I've created this in Illustrator.

It might look a bit confusing at first but if you look and try and find, there's a hamburger menu icon and there's a cross and they're connected in these two points.

These are the rails along which our lines will travel as we create the animation.

If I split it up, you can see that the first two paths are creating part of the cross and also part of the hamburger menu icon.

The line's gonna travel around these trajectory defined paths which will dictate our animation for us. So I created that graphic using Illustrator in this case, and then I've exported it as an SVG and I put that SVG into my HTML.

Then, I can use CSS, and using those dasharray and dashoffset values, to just create dashes along the parts of the graphic that I want to show for our initial state.

In this case, I'm just showing the hamburger menu icon and then, I've hidden the rest of those lines. Then, I get those values and put them in my CSS and then, I go and do the same process to find the cross. So I get rid of the parts that I don't wanna see and I get those values and I have that as my second state. I'd maybe use a class toggle to toggle between those two states.

Then, we can use CSS animation or transition in this case to dictate the animation.

I've used just some timing delays to spread out the animation and very quickly, I've got a nice-looking animated button which would be quite difficult to achieve using HTML and CSS but it took very little time using SVG. Here's another example of a hamburger menu icon being animated using the same principles and techniques. Similarly, it's just using CSS to transition the dashoffset and dasharray and it's a completely different look and effect. This one's Codrops', they've got a really cool tutorial you can follow as well to recreate it.

I'd recommend that after this, maybe, if you're interested. Just to show you that, as a designer, you can use this technique to create whatever you want. It's a very useful thing to create things.

If you're thinking that the hamburger menu icon might be a bit difficult to design, you can also just use that technique to do things like this hover effect which is just an SVG element, rectangle in this case, being positioned over my button and then, I'm using the same techniques of transitioning my stroke to outline the button when I hover on it.

That's something that would be quite difficult to achieve using CSS, you'd probably have to use pseudo-elements, a whole bunch of them.

But it's very easy to achieve using SVG.

Another website element that I use all the time, I think you might as well, is check boxes and radio buttons. I think they're on every website I've ever done. They're another perfect place for us to use SVG to jazz up our websites a little bit.

We can create these hand-drawn-looking check boxes and radio buttons using the exact same techniques I've just shown you. To do that, I created these shapes using Illustrator. I just hand-drew the fills for my inputs and then, I exported them as SVG as we want to do. If we've chucked them in the HTML into the label and then, we've put that label directly after the input. Then, we can visually hide the real input using some CSS and position it to the left of the container. Then, I've used a before pseudo-element to create a fake check box or radio button in its place. Then, I can position my SVG in the same spot and I can apply dasharray and dashoffset to create the dash along the path and then, remove it as we were looking at before. Then, I just used the checked selector and the adjacent elements selector to toggle that dashoffset to be removed when the input is clicked or tapped.

I've used the transition to dictate the timing of that and I've got, very quickly again, a nice hand-drawn check box.

Hopefully, by now you're on board with me.

I think SVGs are fantastic.

They're really useful, line animation's just one example, you can do lots of different animating techniques with SVGs. But they're also fantastic because they're scalable. If you need to change the size of those graphics at all, it's no pain at all.

You can just change the size of it and not worry about pixelization or anything like that. They've got great browser support.

All modern browsers generally support inline SVG. I think CSS and SVG support is really good. IE doesn't support animating on SVG elements so with that hamburger, it'll just toggle between those two elements.

So it can be pretty easy to do fallback stuff if you're not relying on the animation for the communication.

They can be accessible.

If you put title elements into SVG, they can be screen reader accessible which is fantastic. They generally have small file size.

If you're writing them yourself or if you're using those optimization tools I showed you, then they generally outpace using PNGs or any other image file format to a great degree. If you are familiar with JavaScript and you're not too scared off by using libraries, there's a whole bunch of animation libraries which give you really good control over SVG. These are some of the most popular ones.

I think GSAP's probably the most well-known and maybe the most powerful but I think Snap's very powerful as well.

But there's different ones that cater to different needs. These are useful because they let you support animations in IE and older browsers because they use JavaScript animation as opposed to CSS animation.

They can let you do complicated chaining of animations. If you've got to do a complicated timeline of events, they make that really easy.

They let you do programmatic stuff.

If you need to make stuff happen on the click of a button, or vice versa, that's very easy with JavaScript, obviously. Some of them let you do tweening and shape morphing stuff which is really cool.

I think the biggest benefit of them is that they remove that manual hard-coding of values. So looking for the line length, looking for the timing function value you need, can be really easy using a JavaScript library. I thought I'd just show you a quick example with a really simple library which is Velocity. Velocity's just a jQuery plugin type thing where you give it an SVG element, in this case a rectangle, and you just chain these methods on that to create this timeline of events which will happen to our element.

We're gonna move it along the X axis, change its colour, change its size, and rotate it. You just tell it to do these things and it's very easy, it does them for you.

Velocity's one of the easier ones but just to show you that these animation libraries can be quite useful. I do wanna stress that HTML and CSS, just vanilla HTML and CSS, can get you very far with animating SVG.

You can accomplish a lot.

A lot of these tutorials online will jump to using those animation libraries. Whereas, I think that getting a basic understanding of how CSS animations work on SVG will give you a better working knowledge of how to sequence your animations and how to pull off things.

If you know HTML, then it's very easy to learn the syntax for SVG.

They're quite simple to read and understand. To style and animate, I'd like to argue that they're just as easy to style and animate as HTML elements.

You can use classes, IDs, and such on inline SVG and you can just targe them as per usual.

Then, they give you HTML and CSS superpowers. They let you do things which you couldn't do with just HTML and CSS.

I like to think of them almost like an extension of HTML where I just use SVG as this way to get irregular shapes into my web designs.

I think Vitaly mentioned earlier today that we tend to think in terms of boxes and circles with web design and SVG gives you the easiest way to put irregular shapes and graphics into your web elements. So I'm a big fan of them.

Thanks for listening.

My slides are up here, maybe I should've mentioned that earlier.

The CodePens for each of the demos are up as well so if you wanna check those out.

Any questions, I'll be in the speakers' lounge after this or you can hit me up on Twitter.

I hope you enjoy the rest of the conference and I hope you learned something about SVGs. Thanks guys.

(audience applauds) (electronic music)