SVG design tools often export code that contains unnecessary comments or decimal places. Optimizing these SVG files can greatly reduce the file size and lead to better animation performance. Sarah also demonstrates how CSS animations are used to animate SVG.
(flute) - So we're gonna go right into optimization and CSS animation now that you guys have some kind of tools to look into the SVG DOM. So, actually I think I have it here. So this is the same output as this. So this is why optimizing is so important. It really does change your file size when you're working with SVGs and it actually makes it totally much more readable.
So obviously we don't need the commented-out code for Adobe Illustrator at the top. A lot of the path data that you see here is designated in decimal places that we don't need to get that far into the decimal places, but I'll kind of show you some of the SVG optimization techniques. You should be using an SVG--I think, you should be using an SVG optimization technique where you can see the visual output. There are some good terminal-based ones but you should be adding a GUI to it because if you're optimizing and you're removing decimal places sometimes it can get a little funky-looking.
And in this case we have the path fill and stroke not on the G element so we're repeating ourselves there, so same output, same thing, it's much cleaner code, much easier to work with. So these are all the tools that I would recommend for you guys. The first one being Jake Archibald's SVGOMG. SVGOMG is basically a web-based GUI for SVGO. It's got the same functionality, so, it's pretty sweet. There's tons of toggles, he gives you a demo to play with, there's all sorts of really nice things in there.
I tend to use that one the most, that's why it's highest on here. The Peter Collingridge's SVG Editor is more old-school, and I still use that sometimes because it actually has an editor inside of it, so unlike Jake Archibald's you can actually go in and hit the editor tool and play around with things a little bit. That's pretty neat. SVGO and SVGO-GUI, I would use these together. That's the terminal-based one, so if you don't want to use a web-based one, especially if you're working locally on a long plane ride, that kind of thing, it's kind of nice to set that up and have that workflow ready.
I would also say that you should keep your optimization tools very readily at hand, because as you're working with the animation, you're going to need to go back in and edit, and having that open makes your workflow a lot smoother. SVGs for Animation Support Breakdown, or how I learned to love the Inline. So for all of these things, image source, object embed, background URL, iframe, you can only designate animation if it's inside the SVG, and even so, it's kind of- some support is not so great, like background URL, if you have the styles associated with the SVG it doesn't work in Firefox and IE, there's a bunch of bugs there, but for Inline, both animation and interaction are supported, so I would really strongly suggest, if you're animating your SVG, to definitely put it inline in your code.
So I'm not gonna really go into CSS animation, like how CSS animation works, that's a pre-requisite of this course, so if you're confused about that, you can kind of go back and read some materials on that, I think there's a great Frontend Masters course about that. So I'm just going to look at how you would make a CSS animation with a DIV and then show you what might be different between the way that do that in SVG. So if we're starting off-- - [Female Student] Excuse me, Sarah? - Oh, yup? - I'm sorry, but will SMILE, smile, ever be supported more than it is today? - SMILE is getting deprecated, so it's not moving into IE and it probably won't move into Edge, it doesn't look like it, but it is moving into a lot of the things that SMILE can do, there are a lot of specs open for it to move into CSS, so, especially things like the motion along a path module.
And you can vote for that, I'll give you a link to vote for that later, you should. So there's a bunch of things like that, but I wouldn't- You know and there are some rumors that it might be coming back, it's still not supported in IE though, so I would not suggest working with SMILE. Especially because I'm going to show you a bunch of techniques where it's very well-supported, so it doesn't really make sense to learn that whole syntax. So for the animation key frames, we have background blue, translate, and we're moving things with translate because that's more performant, I'll get to that in a minute.
And then animation properties shorthand, just as a quick refresher, you can designate them in any order except the numbers, the numbers have to stay in order, so that they know which one's the delay and which one is how long the iteration goes for. So if we're gonna apply that to- we've got to wait for CodePen to wake up. So we've got a delay, and then it moves and it changes color as it's moving. So that's CSS with a div, you're probably familiar with that.
So what happens when we apply it directly to the SVG? It all of a sudden has this weird box around it. Does anybody have an idea why that would be? - [Male Student] In the group, not the circle? - Close, it's because, when we're setting the background, because the background is not the supported part of that, it's actually just going to the whole SVG, right? So it's setting the background of the whole SVG to red, blue, purple.
So it's still moving across, but that's that whole SVG view box that you see there. So we're moving the whole SVG instead of the circle, first of all, the background doesn't work for SVG so we use fill, and we apply fill to the circle not the whole SVG. So what happens when we apply it to the circle instead? So obviously the problems here are that it's moving out of the view box.
Remember how I told you that if you move something and you don't give yourself enough breadth it will actually not work correctly, and then we're still applying background instead of fill. So what's better is to change the fill color, and then we translate and we put it on the circle. And then we've expanded the view box, do you see how this is no longer- oops, that's not what I meant to do. This is no longer a smaller number, we've actually made it as big as we need for that movement.
So we target the circle, expand the view box, use fill, and remove the fill from the markup. That's another really important part, you can't leave the fill in the markup because with the SVG being inline, it's going to override anything that you try to put in your CSS so just pull the kind of styling properties out of the SVG and that way you can style it with CSS. You don't have to pull it out for everything that you're gonna do, just the things that you're gonna style with CSS. So after all that, why SVG? Let's look at the star code again.
There is no way, there is no possible way to write a star in CSS with that few lines of code. Even if you can do it in Sass or less, it'll still compile down to something much larger. So that's just a star. There's also workflow reasons. You're never going to work with a designer where you're like, "Okay, can you just draw that all for me in CSS and give it to me later?" You know, that just won't happen. If you want to spend your weekend making something with CSS to see if you can do it, that's totally legit, but that's just not a very good working model for moving forward with the web.
So CSS was just not made for drawing like SVG is. So I drew this in Illustrator and it's two kilobytes gzipped for this whole image. So that's really, really awesome when you compare it to some of the images that you might have on your website right now today. So any time you have a bitmap image that's gonna be about this size it's gonna be way higher than two kilobytes. The other cool thing is that you can reach inside it and animate it.
Note: This course was created by Frontend Masters. It was originally released on 2/19/2016. We're pleased to host this training in our library.
- Paths and groups
- Platonic shapes
- Optimization and CSS animations
- SVG sprites
- Atmospheric and elemental motion
- GreenSock workflow
- Staggering animations
- UI/UX animation vs. standalone
- DrawSVG and motion along a path
- Animating text and relative color values