SVG Basics—Creating Paths With Line Commands

A couple of weeks ago when talking about basic SVG shapes, I mentioned paths as a more general way to create any shape. Paths are more powerful and flexible than the basic shapes and they can be used to create any or all of them.

With paths you can create lines and curves and connect both to form shapes. You can combine both to create complex paths and subpaths. Paths can be filled and stroked or used to clip other elements. They can do all three at once and more.

If you export an SVG image from a graphics editor, it likely exports all your shapes and lines as paths. If you work with SVG, you’re going to come across paths a lot so it makes sense to learn a little something about them.

Today I’ll talk about the path element and the different line commands you can can use. Next week I’ll continue and talk about curve commands.

The path Element

You create a path with the aptly named path element. Inside the path element you set a path definition through a series of commands and coordinates.

[code type=html]
<svg>
<path d="path data" />
</svg>
[/code]

The path definition (d) is filled with different commands to move to a new point and draw different lines and curves. The majority of this post and the next will cover these commands.

The path element can also take a pathLength attribute. The attribute takes a non-negative number for a value and it’s used to override the length of the path as calculated by browsers.

[code type=html]
<svg>
<path d="path data" pathLength="non-negative-number" />
</svg>
[/code]

I don’t want to talk too much about pathLength now. It doesn’t entirely override the calculated path, but is used to scale it to a degree. This can affect calculations that are used to place text on a path or to have an animation follow a path. It could also affect different stroke operations.

Let’s get to the different path data commands. We’ll start with the simpler line commands and move on to the curve commands next week.

Line Commands

There are five different line commands you can use to create a path.

• moveto (M or m)—moves to a new location
• lineto (L or l)—draws a line from the current coordinate to a new coordinate
• horizontal lineto (H or h)—draws a line to a new horizontal coordinate
• vertical lineto (V or v)—draws a line to a new vertical coordinate
• closepath (Z or z)—closes the current path

You won’t spell out the command, but rather use the letter for the command. Upper case letters signal the coordinates as absolute values and lower case letters signal the coordinates as relative values.

The moveto and lineto Commands

Here’s a simple example using both moveto and lineto. Note, I’ll be using inline SVG for the code in this post.

[code type=html]
<svg width="600" height="400">
<path d="M 50 50 l 0 300 l 200 0 l 0 -300 l -200 0" fill="none" stroke="#000" stroke-width="2px" />
</svg>
[/code]

First let’s cover what you should know if you’ve read the previous posts in this series. I created an svg element and gave it a height and width. I also set the fill to none and added a stroke to the path. This way we’ll see the actual path lines instead of a filled in shape.

The path data starts by moving to a point with coordinates x=50 and y=50 (M 50 50). Every path needs to start with a moveto.

Next is a lineto command, here set as a lowercase letter l (l 0 300). The command says to draw a line from the current point (50 50) to the relative coordinates 0 300. In other words the line will be drawn 0px horizontally and 300px vertically.

Continuing is another lineto command (l 200 0), which draws a 200px horizontal line followed by two more line commands (l 0 –300) and (l –200 0). These commands draw two more lines, one vertical and one horizontal in the opposite direction to the initial horizontal and vertical lines.

Here’s what the entire path looks like

The path first moved to a starting point and then it drew a line down, one to the right, one back up, and one to the left which ends at the starting point.

You’ll notice I didn’t specify units. The default is px and I’ll talk more about this when talking about the SVG coordinate system. Also note the path data isn’t a comma separated list of commands. The commands just follow one after another. More on that in a bit.

The closepath Command

To create the rectangle outline in the previous example we used only the moveto and lineto commands. Let’s mix in the other three commands.

[code type=html]
<svg width="600" height="400">
<path d="M 50 50 l 0 300 l 200 0 l 0 -300 Z" fill="none" stroke="#000" stroke-width="2px" />
</svg>
[/code]

The code here is the same as the first example, with one exception. I changed the last lineto command (l) with a closepath command (Z). Since no coordinates are specified Z and z do the same thing.

As you can see it looks exactly the same as the previous example, however closepath saves us from having to specify the last set of coordinates.

The Horizontal and Vertical lineto Commands

Replacing the last lineto with a closepath makes things a little cleaner than the initial example, but we can do better.

[code type=html]
<svg width="600" height="400">
<path d="M 50 50 v 300 h 200 v -300 Z" fill="none" stroke="#000" stroke-width="2px" />
</svg>
[/code]

Here I replaced the middle three lineto commands with vertical lineto (v) and horizontal lineto (h) commands. These commands only need one of the two coordinates as the command itself takes care of the other, which will be 0.

It’s still a lot of points, but it’s cleaner than the original. Granted you won’t always be drawing horizontal or vertical lines, but when you do, you probably want these two commands instead of the general lineto.

Styling, Whitespace, and Commas

You have some measure of control in your use of whitespace. You can remove and add whitespace to make each command and the entire path data easier to read.

[code type=html]
<svg width="600" height="400">
<path d="M50 50 v300 h200 v-300 Z" fill="none" stroke="#000" stroke-width="2px" />
</svg>
[/code]

Here I closed the space between the command and its first value. I also added an extra space after the last coordinate and before the start of the next command.

While commas aren’t necessary, you can use them to separate the x and y coordinates after any command. You don’t use them between the commands, but you can use them between the coordinates.

[code type=html]
<svg width="600" height="400">
<path d="M50,50 v300 h200 v-300 Z" fill="none" stroke="#000" stroke-width="2px" />
</svg>
[/code]

I added a comma between the x and y values for the starting point of the path. I could have kept the space between them, but thought it easier to read without the space between the coordinates. You have some flexibility.

You can also skip the command if it’s the same as the previous command. Here’s the path using lineto commands from the first example. Where one lineto follows another I removed the actual command. Hopefully the spacing and commas make it easy to find the different sets of coordinates.

[code type=html]
<svg width="600" height="400">
<path d="M50,50 l 0,300 200,0 0,-300 Z" fill="none" stroke="#000" stroke-width="2px" />
</svg>
[/code]

This works, but I find it more confusing to read. I prefer seeing the commands as they help separate one coordinate from the next, but again I’ll leave it to you to decide what’s easiest for you to read.

You can use even more whitespace and place each path command on its own line.

[code type=html]
<svg width="600" height="400">
<path d="M50 50
v300
h200
v-300
Z"
fill="none" stroke="#000" stroke-width="2px" />
</svg>
[/code]

This is probably the easiest to read, but obviously takes up the most space. Also keep in mind one solution to make inline SVG work in WordPress is to have everything on a single line.

Closing Thoughts

Hopefully you can already see how much more flexible paths are than the simple shapes we saw previously. One last example.

[code type=html]
<svg width="600" height="400">
<path d="M100,100
v200
M400 50
h-200"
fill="none" stroke="#000" stroke-width="2px" />
</svg>
[/code]

With a single path definition I created two seemingly independent lines.

It’s that easy to create two visibly disconnected lines with a single command and we haven’t even talked about curves yet, let alone how text can follow a path or how animations can be made to follow paths.

Next week I’ll continue and talk about the different curve commands you can use. I’ll get to text and animation later in the year.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.