SVG

[00:00:00]
>> Sarah Drasner: SVG, all right, you probably heard me rumble about SVG before. But in case you haven't, SVG is awesome. Look, we're talking about that piece of graph paper we talked about earlier. And you have points that you're creating, you're basically saying, go here, go here, go here, go here.

[00:00:20]
And then the browser makes a curve for you, you've just plot in, you've just communicated a few numbers, and the browser knows to make these beautiful curves and all these different fashions based on some letter you stuck in front of it. How cool is that? There's so many ways that you can play with SVG and one of the things that I really like about SVG that has a navigable DOM.

[00:00:43]
So, if you're used to working with the DOM and you don't wanna learn, with Canvas, you're learning Canvas. But with SVG, you can really literally slap a class on one piece of the DOM and start to move it around. And it's in these layers that are kind of intuitive.

[00:01:00]
So if you have, let's say you have my face and my body, and you have my hands that's separate from my arm, you can move the hand around separately from the rest. Cuz they're not all flattened together, right? Like if it was an image that's a JPEG, you would have to cut my hand out, find the background to replace it on top of and then absolutely position my hand on to that area but if you just have little eyes that are on that canvas, you can just move the eye around, all you need to do is find it in the DOM and if it breaks, it's in the DOM link.

[00:01:37]
And like, you're like yeah, okay, I see you and you can see, you can debug directly in your browser, super cool. SVG can be super performance too. So it can be like the most performed, like a lot of the things that I make are like under 5 kilobytes, even though they're totally crazy.

[00:01:56]
But it depends on how many path points you draw. So, unlink those other ones where we're plotting every pixel, we're plotting all of those points. If you have a million bazillion path points, then that's going to be really expensive. Whereas, just a few is cheap. So drawing a circle, very cheap, drawing a few lines and stuff, very cheap.

[00:02:17]
If you have like a texture, that's like that's probably gonna be really expensive. You can reduce path points for SVG and make them much smaller, I have a article in CSS tricks, it's not linked up here but if you wanna see it later, it's increase performance with SVG or something, write performance SVG, it'll probably come up.

[00:02:41]
CSS tricks has pretty good SEO and it runs through all of the tips that I use to reduce the file size. I worked for one company where we actually got a project and used a lot of SVG, and I reduced the load time from 12 seconds to 2 seconds by optimizing all of the SVGs correctly.

[00:03:04]
So, there are ways of like, even if it visually looks the same, there are ways of working with the SVGs that can completely change file sizes. And you can do so much fun stuff with it, like, this is a huggy laser panda factory that I made. Because that's where all the huggy laser pandas are made is this factory, and then you can kind of scroll it down and it reconfigures, and it works on responsive, even old mobile phones and stuff because it's just click events and the DOM, and that's it.

[00:03:38]
It's just some small request animation frame. [LAUGH] SVG actually can make other images smaller. This is a tool from a friend of mine named Shaw, who's definitely worth following. I just grabbed a random image. I didn't even carefully select an image for this and the output size went from 88 kilobytes to 16.75 kilobytes.

[00:04:07]
So this is a really cool tool to check out, too. And I mentioned before, SVG can be parts of your layouts, so if you learn how to draw those bits, again, SVG can constrain to any proportions and it can even take up any spaces. So if you want to like absolutely position an SVG within a DIV to make a diagonal or some other line, that's a really cool way for you to be able to make interesting shapes that people can't usually make in their browser.