SVG Support & Performance

[00:00:00]
>> Sarah Drasner: A lot of times when we talk to people about SVG, they're like, but the support. No, no, no, no, no, the support [LAUGH] was a problem a long, long time ago. And those things have all changed. That one with the IE11 that's green, it actually goes back to IE9.

[00:00:15]
I don't know why they don't show that appropriately in the Can I Use. But look at all that green. We've got. We never get. That never happens. So if you're worried about not using SVG because of the support of SVG, don't worry. That's long gone, since been an issue.

[00:00:34]
So I hope I never have to show this slide again. We can move forward into the future knowing that SVG is well supported and we can all use it. And it's just like a party. I can make my own party with SVG or I can have JavaScript be the event coordinator for me, get it event.

[00:00:54]
If you don't like JAD jokes, this is gonna be a long day. [LAUGH] So I really think that the way that you can play with it and manipulate it is really, really fun. And by the end of the day, you'll know how to do this.
>> Sarah Drasner: Why do we talk about images when we talk about performance?

[00:01:14]
Images are really, really important for performance. When I talk about SVG being a really important and really performant and really small file size. When I look at HTTP archive, most of what we deliver across the web is images. That's the heaviest thing. We can all really do good in optimizing fonts, optimizing JavaScript, making sure our build sizes are small.

[00:01:38]
But if you're not also optimizing your images and paying attention to how big your images are, you're doing yourself a disservice. That's a really big cost for performance. We're gonna talk a bit about performance before we even get into animating anything at all. I love this quote by Jason Grigsby, if you were here yesterday, I used this quote in both slide decks, because I think it's really important.

[00:02:02]
You can't be a web performance expert without being an image expert, and I think that that's really true. If you really want to understand and care for your site's performance, it's really important to understand how to optimize correctly. So SVG is really great for loaders. I made this for Smashing Magazine.

[00:02:21]
if you go and buy anything for Smashing Magazine and you have this check out experience, then you'll see this little cat watching the little bird before you check out. The really amazing thing is when they gave me this graphic, they were like, we really wanted to use this loader but we think it's too heavy.

[00:02:38]
I think it was something like 150 kilobytes and I was like, no worries. The entire thing now, once I optimized it, was six kilobytes. That's including the animation, the whole thing packaged up. So if you optimize correctly, you can save a whole of stuff. Also, it's perfect for loaders.

[00:02:55]
If you need something to load fast, six kilobytes is a really good way of going. That's a lot visual information for not a lot of cost. SVG can make other images smaller. So there's this JPEG to SVG that my friend Shaw made. If you don't follow him, he's shshaw on Twitter and CodePen.

[00:03:21]
He made this and there's some prior art here. He made it off of this other concept that other people had been working on. But you can use this. And I wasn't specifically picking an image here, I was just picking something random. So 38 kilobytes to 16 kilobytes just for some random image.

[00:03:40]
So you can go play with this and check it out, and he has some documentation for how he's making this as well.