Why SVG?

[00:00:00]
>> Sarah Drasner: So why SVG? Let's look at the code for a star again. Now that is pretty nice. If I made a star in divs, what I would have to do is I would take a div and I would make a border. And then I would expand the border so that it's in the entire length of the box and actually collapse the entire box.

[00:00:21]
And then I would make every border transparent, except for one border that had a corner. And then I would give that corner a color. And then I will take that and that will be a triangle. Then I will take that and I would duplicate it, then I would rotate it with the transform.

[00:00:37]
And then I'll duplicate it and rotate it with transform, rotate it like that over and over again and then I'd eventually have a star. That is just a star and that's not that efficient. SVG is built for drawing, it's not a hack. This is actually the way the web was designed to make drawings.

[00:00:58]
CSS was not built for making drawings. CSS was built for layout, it's a hack. So if you build shapes with CSS, it can be a good exercise. It can be like a fun way to get better at CSS or learn a little bit more. But no designer on the planet is building a whole diagram in CSS and then handing it to a developer to animate.

[00:01:23]
That doesn't happen in real life. Really, what they're gonna do is they're gonna draw some sort of diagram in Illustrator or Sketch or something like that, and hand a developer an SVG. CSS was not made for drawing like SVG is, and also it clouds up the dom. We talked a little bit about accessibility.

[00:01:43]
Creating a star with CSS is not exactly the most accessible thing you could do on the planet. I drew this in SVG and it's 2 kilobytes GZipped. And you can kind of guess why, it's a bunch of circles. You know how I made the circles? The circles are c-x-c-y and a radius.

[00:02:01]
That's pretty small, so these kind of shapes are so easy for SVG to draw. We can also reach inside it and animate isolated elements. And throw the cow over the moon and make it scare the astronaut, and we're gonna do that later today. So that's really fun.