SVG Tutorial / The Path Element / Day 5

How to Draw Basic Paths with SVG

Once we covered basic shapes, it’s time to move on to the path element. The path is the most powerful SVG element. We can define pretty much anything with paths and if you open any SVG file, you will mostly see paths.

The shape of a path is defined by the d attribute. Here we define several drawing commands. A command always starts with a letter defining the command type and ends with a coordinate.

Here we only have the two most basic commands, move-to and line-to. The move-to command moves the cursor to a point without drawing a line and the line-to command draws a straight line from the previous point. A command always continues the previous command. When we draw a line we only define the endpoint. The starting point will be the previous command’s endpoint.

Hamburger menu icon

Before we get to the arrow example, let’s draw a simple hamburger menu icon. We draw three lines within the same path with the move-to (M) and line-to (L) commands. First, we move to the start of the top line with M -45, -45 and draw a line to its end with L 45, -45. Hover over the coordinates in the code or on the image to see how they are positioned.

-100, -100
-45, -45 45, -45 -45, -45 45, -45
200, 200 
<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
        M -45, -45
        L  45, -45"
    stroke="#333333"
    stroke-width="15"
    stroke-linecap="round"
  />
</svg>

Then we continue and draw to more lines the same way. What is cool about paths, is that they don’t have to be continuous. We can have several move-to commands within the same path. The commas between the X and Y coordinates are optional. We skip them this time.

-100, -100
-45, -45 45, -45 -45, 0 45, 0 -45, 45 45, 45 -45, -45 45, -45 -45, 0 45, 0 -45, 45 45, 45
200, 200 
<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
        M -45 -45
        L  45 -45
        M -45   0
        L  45   0
        M -45  45
        L  45  45"
    stroke="#333333"
    stroke-width="15"
    stroke-linecap="round"
  />
</svg>

Icons like this often feel like noise on HTML. In a later chapter, we learn how to inline this icon in CSS and use it as you see it at the top left corner of this page.

Heart shape icon

Here’s another example made with a move to command and two line to commands.

-100, -100
-30, -20 0, 10 30, -20 -30, -20 0, 10 30, -20
200, 200 
<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
        M -30 -20
        L   0  10
        L  30 -20"
    fill="none"
    stroke="red"
    stroke-width="80"
    stroke-linecap="round"
  />
</svg>

In the example above if we reduce the value of the stroke-width property, then we realize that the code above is actually a simple V shape.

-100, -100
-30, -20 0, 10 30, -20 -30, -20 0, 10 30, -20
200, 200 
<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
        M -30 -20
        L   0  10
        L  30 -20"
    fill="none"
    stroke="red"
    stroke-width="10"
    stroke-linecap="round"
  />
</svg>

Exercise: How would you do a full-screen icon?

Did you know you can put not only videos on full screen but any other web elements as well? Click the icon below to see how it works.

How would you do the full-screen icon below? Check out this YouTube tutorial to learn how.

Hint: You can always right-click on an SVG in the browser, select Inspect, and check its source code.

Click this icon to open this page in full screen

Arrow icon

Then to get to our example for today, we can draw an arrow in a very similar way. We start with a line in the middle, then we continue the line to draw the upper wing.

-100, -100
-70, 0 70, 0 30, -50 -70, 0 70, 0 30, -50
200, 200 
<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
        M -70 0
        L 70 0
        L 30 -50"
    fill="none"
    stroke="#D1495B"
    stroke-width="25"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

You might note that we also had a stroke-linejoin property in the previous example. This works similarly to stroke-linecap, but this one affects the connections of the path segments. If we remove this property, the path will look as follows:

-100, -100
-70, 0 70, 0 30, -50 -70, 0 70, 0 30, -50
200, 200 
<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
        M -70 0
        L 70 0
        L 30 -50"
    fill="none"
    stroke="#D1495B"
    stroke-width="25"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

Then we can finish the line with moving to the end of the horizontal line again, and drawing a straight line downwards to draw the lower wing of the arrow. You might notice that at the bottom of this and other pages in the navigation button we include a similar SVG.

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <path
    d="M -70 0 L 70 0 L 30 -50 M 70 0 L 30 50"
    fill="none"
    stroke="#D1495B"
    stroke-width="25"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>