What is SVG?

[00:00:01]
>> Sarah Drasner: SVG anatomy overview. Let's talk a little bit about what SVG is, why it's cool, why we use it. And then we're gonna talk about what the internals are because before we even animate, we really need to figure out what's in that DOM. Sometimes when you open an SVG and you've never seen an SVG before, you're like, what is all of this number garbage?

[00:00:23]
And we're gonna break that down so that that doesn't seem intimidating for you. SVG, it's crisp on any display. It's in a vector format, so basically, we're drawing these points with math. And no matter how big or small it gets, it's gonna stay completely crisp. So that's really nice.

[00:00:41]
You know how when you're doing responsivedev, sometimes when you have a png of the cut up many multiple images. You use a picture element or source set, and you've gotta add all of them, get them from the designer, all this stuff. With SVG, you're delivering one asset and you can make it scale for all the devices.

[00:00:58]
We're gonna do some really tricky fun stuff with responsive SVGs. It's less http requests to handle. In fact, it can be no more http requests to handle cuz you can put it directly in line in the HTML. So you can actually have it not incur that extra cost.

[00:01:17]
It's easily scalable for responsive, that's in the name, scalable vector graphics. So it's very squishy and organized, like show and learn what we can do with that squishyness today. It's a really small file size if you design for performance. If you design for performance is a major piece of that.

[00:01:37]
So we're going to talk a little bit about how to make sure your SVGs are built appropriately and not abusing the DOM while you're building them out. But some of the stuff that you can do in just a few kilobytes of data is really amazing. It's incredible, especially if you compare to a giant PNG or a giant JPEG.

[00:01:59]
So that's really cool. It's easy to animate, that's part of the reason why we're here. It has a navigable DOM. This is so cool because with a PMG, you basically have this flat image. So if you see a picture of me, then in order to move my hand, you would have to cut out the hand.

[00:02:16]
Then you'd have to figure out what would be in back of the hand. And then you'd have to absolutely position it on top of there. Then you'd have to then move it, but then if it was responsive, I'd have to change all of those parameters. SVG already has navigable DOM.

[00:02:30]
That arm is already ready for me to just move independently. And it's not different from other HTML. You can slap a class on it and move it around with CSS. And you can move it around with JavaScript. All of those same things that you already know how to do from being a web developer apply to SVG as well.

[00:02:49]
It's easy to make accessible, I love this part. There's like many, many tiers of how accessible you can make your SVG. I'm gonna show you the base thing that pretty much most things would be. There's a whole slew of other ways of making SVGs accessible. I'll also give you resources, so you can check out more crazy things you can do with SVG accessibility.

[00:03:13]
Especially if you're making data visualizations or something like that, you might wanna make things a little bit more screen reader happy. But I'm just gonna show you what you probably want nine times out of ten, maybe more than that. And it's fun. Remember fun? I like fun. It's been a while.

[00:03:32]
[LAUGH] We're gonna have a lot of fun today. I really have a great time making these SVG animations. Sometimes if I'm hanging out on the weekend watching a movie, that's what I do for fun, is make these SVG animations. So it's really great for web development but it can also be something that you do on the side, just to replenish your love for a web development.