SVG Path Commands

[00:00:00]
>> I want us to specifically dive into SVG paths. And that define attribute I mentioned earlier, because even within the SVG elements I use really, often. I find that like the path element is extremely powerful. And once we have a good understanding for the syntax of that defined attribute, we can really draw, really, any shape that we might dream up.

[00:00:28]
Or as we talked about earlier, anything that we can dream up in Illustrator, we can draw in the browser. And so let's take a look at this flower petal, and this is my little cherry blossom flower petal. And so here is the, SVG elements, so this is what we need to write to create this shape.

[00:00:58]
And so here we have the SVG and I say I just want a width and height of 100 pixels by 100 pixels. And you can ignore the styling. But the main thing is this path SVG path. And we have the Define attribute. And we're just saying, don't fill it with any color.

[00:01:25]
Show get blank I want the stroke to have a width of 2 pixels. And, this is basically saying move it to coordinate 50 pixels horizontally and zero pixels vertically. And so there's a lot going on here. But the main part that we really, really want to focus on is this defined stream.

[00:01:50]
And I knew that looking at it right now, it looks like a bunch of gibberish. Like especially if you see it in the chrome inspector or something and you see that SVG path and is this string, sometimes it looks like a lot. But we can actually break this down to three different commands, again the commands that I like to use quite often.

[00:02:21]
With SVG paths, and there's definitely many more commands that you can use with SVG paths. And these are the ones that I think, especially with the curveto are the most powerful. So the three commands are moveto, lineto, and curveto. So let's talk about how they work a little bit.

[00:02:49]
So moveto has a syntax of x, y. And the way that I like to think about it is, it means pick the pen off the paper and put it back down at this position x, y. And then next command is lineto. And so what this one is, is we have a x, y position and what that means is if the pen is already on the paper, so we either already have a moveto command before it or maybe we're changing on some other commands.

[00:03:28]
But the important thing is if we have the pen already on the paper, draw a straight line to that x, y position. And so you can see it here. And so we chain it off of that moveto so we have some first move to x, y position that we already have the pen on.

[00:03:48]
And then we draw that straight line to the line to x, y position. And the fun one is this curveto this cubic Bezier curve. And I think that with this one, and we can actually draw a lot of different shapes. So with this one is that we have three sets of x, y coordinates.

[00:04:16]
The first one is this blue control point or anchor I think different materials call it different things but control point. The second x,y position is this purple control point. And finally, this red one is the x, y coordinate that we should end up at. And so the way that I like to think about curveto is again if the pen is already on the paper, in this example it's on the paper with a moveto command.

[00:04:50]
So if the pen is already on the paper, then we draw a straight line to that final red x, y position. And then we take the blue and purple anchor points, and we kind of drag it to and we kind of like drag it and nudge it until we get the curve we want.

[00:05:15]
And so actually you can also imagine that if right now in this particular example, we have the two anchor points going up. But if you for example curve the, if you put the purple anchor point, kind of below that dotted line, then you can draw a curve that kind of looks like a sine wave.

[00:05:36]
So, it really is about kind of where you position these two anchor points. So here's how we can break down that flower petals define attribute from earlier. So the first set of commands is this move to 00. This is Greenpoint. And then I think of it as I drew a straight line to the x = 20 and y = 100.

[00:06:10]
And then I'm taking these two anchor points, and I drag it out to 5040 and 5070 and that's how I get this first curve. Then what happens is I've changed on a lineto command. So that now the very end x, y coordinate of my previous curve command is now my starting x, y and then I draw a straight line to 085.

[00:06:50]
And then what happens is that previous lineto command then switches and becomes my starting point. Draw a straight line to the ending and the line to -2000 And then our final curve uses that previous line to as the starting positions and draws the curve with the ending point back 00.

[00:07:20]
And so that's how we drew that flower petal.