<path /> (Path-Line)

Objective: Learn to use the path element to draw shapes that need lines

The drawing commands for  <path />  lines are L,l, H,h and V,v.

16.1 Move and Line Draw Commands

M50,50 Move pen to absolute point. The starting drawing command is always M. The M instructs SVG to move the pen to the X,Y absolute coordinates without drawing anything. The next drawing command will start from this point.

m50,50 Move pen to a relative point. The m instructs SVG to move the pen to the x,y coordinates relative to the current position without drawing anything. The next drawing command will start from this point.

L50,100 Capital L means draw a Line to an absolute position. The pen draws a line from the current X,Y coordinates to the specified L X,Y absolute coordinates.

l50,100 Lowercase l means draw line to a relative position. The pen draws a line from the current X,Y coordinates to the specified l x,y relative coordinates.

H100 = Capital H means draw a horizontal line from the current position to the specified absolute X coordinate.

h100 = Lowercase h means draw a horizontal line from the current position to the specified relative x coordinate.

V100  = Capital V means draw a vertical line from the current position to the specified absolute Y coordinate.

v100  = Capital V means draw a vertical line from the current position to the specified absolute y coordinate.

Z,z = close the path. This is not case sensitive.

SVG Editor M, m and L, l basics

The red line is drawn with the commands d="M50,50 L250,50" (draw to an absolute position using uppercase L). This illustration shows how to read those drawing commands in the d="" attribute.

The red line is drawn with the commands d="M50,50 l250,50" (draw to a relative position using lowercase l).

The green lines show the combined path statement using the lowercase m to apply a relative move of the pen from the current position without drawing. d="M50,150 L250,150 m-250,0 l250,50"

These can be combined into a single path statement where the command will be: d="M50,100 L250,50 M50,100 l250,50" This is the blue lines. They have been moved down to Y="100" to make it easier to see the differences.

The green box has been drawn using absolute H lines and V lines.  d="M50,250 H150 V350 H50 Z" In this example there are no spaces between the drawing commands. They are not required except for readability as in the following example.

The blue box has been drawn using relative h lines and v lines. d="M160,250 h100 v100 h-100 z"

SVG Editor M, m and L, l  advanced

Once you have defined a drawing method using L or l you can continue with as many drawing coordinates as you like to create a path of any complexity or length.

Here we have drawn three shapes (boxes). The red one uses absolute coordinates, the blue one uses relative coordinates. The green one uses a mixture. Note they all have fill="none" applied. Experiment with different fill colours to see the effect.

Red shape d="M20,20 L380,20 380,380 20,380 20,20" (absolute coords)

Blue shape d="M40,40 l320,0 0,320 -320,0 0,-320" (relative coordinates)

Green shape d="M60,60 L340,60 340,340 l-280,0 0,-280" mixed relative and absolute coordinates)

16.2 SVG Editor Let's Draw something

Using just one path statement let's draw a house (again). Here it is with one path (annotated)

d="M200,50 L350,160 50,160 200,50 -roof
   M100,160 L100,300 300,300 300,160 -walls
   M170,300 L 170,200 230,200 230,300  -door
   M110,200 L 150,200 150,260 110,260 110,200-window
   M250,200 L290,200 290,260 250,260, 250,200-window
   M100,125 L100,60 140,60 140,95" -chimney

NOTE. See how a single path that draws inside itself cuts holes in the shape. This is a very useful and powerful feature as we will see moving ahead.

16.3 Exercises

Practice drawing <path>s using lines until you are comfortable with both Absolute and Relative drawing commands.