Paths, Groups, & Polylines

[00:00:00]
>> Sarah Drasner: So if I wanted to take these paths and groups, lets explore this for a second. So you might have seen a lot of path data when you export SVG. You just saw some a second ago. And that especially is probably like what is going on here? But don't worry that has a rhyme and reason to it as well.

[00:00:17]
So if we have this svg, we have this thing called a g. And a g is a little bit like a div. It's just a group. And it's a way of grouping multiple objects. And that's really great for svg because, lets say you have a whole scene and you have a car, and that car has tons of paths in it and stuff, you wrap the whole car in a g, in the group.

[00:00:37]
And then you can move the whole car without having to move each path individually, right? So g is a really important thing to keep in mind. And when we talk about optimization, we're gonna to talk about not removing gs maybe. Because you don't necessarily want all of those groups to be gone.

[00:00:55]
So we have two paths here. One of them is open and one of them is closed. If we go to the end of these paths, you'll notice that one of them does not have a z and one of them does. That z, that's the thing that closes it.

[00:01:10]
So if you're drawing something and you want it to find, if you're like, again, this is the penultimate one, I want it to go connect back to where it came from, you can put a z. Or likewise, if you're looking through a bunch of paths, and you're like, wait, I'm not sure which one this is, that z is a good indicator.

[00:01:27]
Okay, that one's close so that must be that path. So these paths all start with d for drawing and also start with m for move to. So it always starts with m for move to. If you have a path that all of a sudden breaks really fast, it's probably cuz you accidentally deleted the m.

[00:01:45]
It will not work without the m. So we have this group. The nice thing about groups is they kinda work like divs also. If you don’t have anything specified on the paths itself, you can apply fill and stroke to all of the paths by using group. So you can remove redundancy by saying, okay, everything inside of here is gonna have fill, none, stroke, black.

[00:02:08]
I'm gonna apply it to the group and all the paths will take it.. I can also, likewise, just like CSS and those kind of elements, specify that one path has a stroke of teal and that one will override basically that group. The group will be applied to all of the things inside of it except for the one path that was like, no, I'm very specific.

[00:02:29]
So we can add classes, move multiple things at once. Groups are awesome. Polyline, polyline looks just like polygon. It's the same. In polygon we had points, and they were like xy, xy, xy. Polyline does the same thing. The only difference here is that this is literally the end.

[00:02:50]
But also if you're doing data visualization, and even if you don't wanna use D3, you're just doing some data binding. So sometimes I'll make just a chart in Vue without loading D3 cuz sometimes it can be kinda heavy. I can really quickly create a a polyline by just binding these attributes xy, xy, xy.

[00:03:11]
You have a polyline that shows all of the data that you need. And since it's SVG, I can make it super big, thousands and thousands of units or whatever, and then just scrunch it to whatever I need it to be, yeah. Cool, so we mentioned that we have all of these different paths.

[00:03:30]
There's this really cool demo that explores paths. You can kind of move things around, and you could see the path data changing. But there's an even better demo, but I would still really like this demo. And it makes noises so that's cool. Yeah, go back here.
>> Sarah Drasner: So let's look at path data.

[00:03:53]
So mentioned before that we start with m, move to, start of the path, new path. L is line to, so that's pretty straightforward, right? Move to is gonna start the first two things. So it'll be like zero, zero, m would start right at the corner and then line to somewhere else.

[00:04:14]
So two coordinates there. H will remove one of those things, right? We don't need if it's redundant. If it's across the x-axis, I don't have to specify where it is on the x-axis for the second coordinate. I just have to do one of them. V is the same kinda thing.

[00:04:32]
If it's a vertical line down and I use a V, I only have to specify one coordinate instead of x and y. I'm only saying where the x would be. You might also notice that we have these capital letters and lowercase letters. So this is a really cool thing.

[00:04:49]
It's the difference between absolute and relative positioning. So let's say you're drawing path points. And you wanna say from here I want you to go 30 units to the right. Then you can do a lowercase because it's relative to here. You can say, I want you to move from here 30 over.

[00:05:11]
No matter where it is on the canvas, 30 over, yeah? But if I say absolute, no matter what, I want you to be at 360, 450, that's a uppercase letter. So that will be, and I use different ones depending on what I'm doing. Cuz sometimes, if I'm gonna make generative path data that goes all the way down the page, I might wanna use the lowercase one, right?

[00:05:37]
Because wherever you're starting from, go a little bit down. But if I'm creating something where something needs to be exactly in that one spot, this is a car where the rear-view mirror has to be right here, I might use a absolute position. So I use an upper case.

[00:05:56]
>> Sarah Drasner: There's curve command. I think curve commands are so great. You basically tell the computer, here's a bunch of x, y coordinates, and it knows to draw a curve. How cool is that? That's so awesome. You can also do so many cool things with it. So you can have slinkies.

[00:06:14]
We're gonna do that. You can have like pools, and water, and fluid dynamics. And we're gonna move around some champagne later, all sorts of cool stuff. So probably the most common that you're gonna see everywhere is the C, that's cubic-bezier. So it starts here. It goes to the first control point, then it goes to the next control point, and the next control point.

[00:06:36]
If it sounds familiar, cuz you've been doing animation before, cubic-bezier in CSS uses the same concept. It basically gives you a bunch of control handles and that's what you're using to define the easing path. So in S, it's basically the same thing as a C. These guys are friends.

[00:06:56]
[LAUGH] It's the same thing, it just reflects. So rather than having to say here, and then here, and then here, and then here, and there, it just takes this first one, and you don't have to specify that again. And it reflects it on the other side. So that's nice if you're gonna make a wave kind of thing.

[00:07:16]
Q is my favorite. You should have a favorite curve command by the end of the class. I'm gonna ask you. It's a quadratic bezier, so basically they share one point. And I like it because you can kinda push it and pull it around, and you're only thinking about that one point.

[00:07:33]
You're not thinking about both. It's kind of easy to reason about. You're saying like, start here, here's my control point. End here and then I know to just move this thing. And I'm moving it around the screen, and then all of a sudden an arm is flopping there or something like that.

[00:07:51]
T and Q are friends, just like C and S are friends. So the T just reflects whatever you've got going on in that Q. A is an elliptical arc. And it has a million parameters and it's really complicated. And I can kind of explain it to you, but you probably won't remember.

[00:08:08]
Well, what we basically do is we draw a circle and then we draw another circle. And then we have a Boolean flag for which circle we're talking about and then one circle cuts out. The other circles circle, and then we have another Boolean flag for whichever circle is cutting out that circle.

[00:08:25]
Does that sound complicated? It's a little complicated. It's great, it's not used that often. So I'm not gonna go into incredible amount of detail about it. If you wanna check out more information on it, SVG Essentials by Amelia Bellamy-Royds has a really great explanation of all this stuff.

[00:08:43]
And you can also find MDN documentation. If you wanna dig in, I'll work with you on it. But it's got a long explanation and not usually that useful. This pen is so awesome. It's also all built in React, like an old version of React. But still, if you wanna understand path values by playing around with them, this thing is so good.

[00:09:07]
It's just great. Also it's very flat, so you might not notice that you have to scroll, but you do. So I can basically, let's reset the path. If I wanna understand how these things work, you can see how that point x position starts. So you start m, 100, and 300.

[00:09:28]
Let me see if I can make the text bigger. No, okay, well, whatever. So you can see m, 100, 300 and then I'm moving things around. It's updating as I'm moving. And then y position, same thing. And then I could basically say, all right, Ctrl+click and create another point and then all of these things come up.

[00:09:52]
So this is like the point x position for L, and then I can make a Q. Remember, we were talking about my friend the Q. So I go x and y. Look, you're making it bounce just by changing that number. It's this number here, see? Neat, so if you wanna learn paths, I think that this is probably the easiest way to wrap your head around it.

[00:10:20]
You can also just play with code and do it that way, but this is kind of like a visual indicator and a really, really great pen to check out if you're first learning.