Paths

Paths are the most advanced and powerful shapes in SVG and are challenging to master because you’re dealing with commands.

Before we get started, I want to make it clear that it is not required to be a master of SVG paths. The whole point of this section is to get an overview of SVG.

When we get to D3, D3 will take care of all the problematic parts. Just as long as you understand what the path element is and what it does, you will be good to go.

Creating a path

To create a path, you add the <path> element.

<path fill="none" stroke="#000" stroke-width="10"></path>

The <path> element is regarded as the most powerful shape because it can be conformed to draw any shape. Paths can create shapes with straight or curved edges. They can also have an unlimited number of sides. It is powerful, but it is the most difficult shape to master.

In the example above, we applied the fill, stroke, and stroke-width attributes. We are starting with these attributes first so that we can get them out of the way. They are not new to us.

Paths are built using coordinates and lines. You input the coordinates, and SVG will take care of connecting them all. It goes by the order you input them. The only difference is the command you have to input for each coordinate. Here’s how you would create a shape using the <path> element.