There are three elements which can be used to construct straight or curved paths. They use a similar set of style attributes which are discussed at the end of the page.

<line>

A line between two points (x₁,y₁) and (x₂,y₂) may be drawn with the <line> element.

<line x1="x1" y1="y1" x2="x2" y2="y2" [style attributes] />

Examples

The green line starts at the point (25,25) and ends at the point (475,25). The stroke (colour) is encoded as #00ff00 which is lime green. The stroke-width is 7. All other attributes revert to their default values.

The red line starts at the point (25,25) and ends at the point (475,25). The stroke is encoded as #ff0000 which is pure red. The stroke-width is 10 and the stroke-linecap is round. All other attributes revert to their default values.

The three descending slanted blue lines demonstrate the use of the stroke-opacity attribute. The first line has an opacity set to 0.1 which is nearly transparent, the second line has an opacity of 50% and the third line has an opacity set to 1.0 which is fully opaque. All three have the stroke set to pure blue which is encoded as #0000ff and a stroke-width of 15. All other attributes revert to their default values.

The slanted magenta line starts at the point (25,75) and rises to the point (475,25), demonstrating the dash-array attribute. In this instance, the pattern is a long dash (length 10), a short space (length 2), a medium dash (length 5) and a very long space (length 15). The pattern then repeats. The stroke is set to magenta which is encoded as #ff00ff and the stroke-width is 5. All other attributes revert to their default values.

<polyline>

If you wish to draw multiple lines that are connected together, one after another, then you can either use several <line> elements or a <polyline> element. Therefore, if line #1 has endpoints (x₁,y₁) and (x₂,y₂), line #2 has endpoints (x₂,y₂) and (x₃,y₃), … and line #(n−1) has endpoints (x_n−1,y_n−1) and (x_n,y_n), then they may be written using a <polyline> element.

<polyline points="x1,y1 x2,y2 x3,y3 ... xn,yn" [style attributes] />

Examples

The red zigzag line has a stroke of #ff0000 and a stroke-width of 10. It begins at the point (25,25), moves to the point (100,75), then (175,25), then (250,75), then (325,25), then (400,75), before ending at (475,25).

We have not seen the fill attribute before. What happens if we leave it out?

An invisible line seems to connect up the first and last points, and the spaces between this invisible line and the explicit line are filled in with the default colour. If you simply want a line, be sure to set fill to none or you will find your image blotted by baffling areas of black!

The line drawn by <polyline> can take all of the various line attributes. The black zigzag line has rounded line caps, bevelled line joins and an opacity set to 40%.

The final example uses the fill attribute to create a yellow (#ffff00) triangle with a dotted cyan (#00ffff) line on two sides.

<path>

A <path> element allows you to draw a series of lines and/or arcs which may be joined together or disjoint. It can be used to render quite complicated images. It is useful to think of a pen drawing (hence the d= command) the image as one or more lines/curves/arcs which may or may not be connected.

<path d="M x1,y1 [movement attributes]" [style attributes] />

The movement attributes are what make the <path> element so complicated. The first command is always M x₁,y₁ which moves the pen to its starting position at the point (x₁,y₁). Some of the more commonly used drawing commands are listed below.

Command	Name	Values	Description
M	moveto	x,y	Move the pen to the point (x,y) without drawing.
m	moveto	x,y	Move the pen to the point x units horizontally and y units vertically from the current position without drawing.
L	lineto	x,y	Draw a line from the current position to the point (x,y).
l	lineto	x,y	Draw a line to the point x units horizontally and y units vertically from the current position.
H	horizontal lineto	x	Draw a horizontal line from the current position to the point (x,yc) where yc is the y-coordinate of the current position.
h	horizontal lineto	x	Draw a horizontal line to a point x units horizontally from the current position.
V	vertical lineto	y	Draw a vertical line from the current position to the point (xc, y) where xc is the x-coordinate of the current position.
v	vertical lineto	y	Draw a vertical line to a point y units vertically from the current position.
A	elliptical arc	rx,ry r large-arc-flag, sweep-flag x,y	Draw an elliptical arc from the current position to the point (x,y). The ellipse has an x-radius of rx and a y-radius of ry. It is rotated clockwise r degrees. The large-arc-flag and sweep-flag take the values 0 or 1 and control which section of the ellipse is used.
a	elliptical arc	rx,ry r large-arc-flag, sweep-flag x,y	Same as A, interpreting the coordinates as being relative to the current position.
C	cubic Bezier curveto	x1,y1 x2,y2 x,y	Draw a cubic Bezier curve from the current position to the point (x,y) using the starting control point (x1,y1) and the ending control point (x2,y2) to define the shape of the curve.
c	cubic Bezier curveto	x1,y1 x2,y2 x,y	Same as C, interpreting the coordinates as being relative to the current position.
Q	quadratic Bezier curveto	x1,y1 x,y	Draw a quadratic Bezier curve from the current position to the point (x,y) using the control point (x1,y1) to define the shape of the curve.
q	quadratic Bezier curveto	x1,y1 x,y	Same as Q, interpreting the coordinates as being relative to the current position.
Z	closepath		Draw a line from the current point to the first point.
z	closepath		Same as Z.

Examples

The blue line is drawn using <line> whilst the identical red line is drawn using <path>.

The blue zigzag line is drawn using <polyline> whilst the identical red zigzag line is drawn using <path>.

The closepath command is a convenient shortcut if your path starts and ends from the same point. The blue triangle uses lines between three points whilst the red triangle uses lines between two points, followed by the Z command. Note the difference in the join between the lines in the lower left corner of each triangle. Always use the Z command to close a path.

A Bezier curve is a smooth curve defined by a set of control points which determine how the curve is shaped. The first and last control points are also the endpoints of the curve but the intermediate control points usually lie outside the path. We will not discuss Bezier curves further.

The elliptical arc command is the most complex of the curves. An elliptical arc is part of an ellipse which is centred at the point (x,y) with an x-radius of length r_x and a y-radius of length r_y which is rotated r degrees clockwise about the centre of the ellipse. The large-arc-flag and the sweep-flag determine which of the four possible arcs are chosen and are the source of endless confusion. They take the values 0 or 1. I usually have to play with all four permutations before I hit on the right combination to get the arc that I want.

Consider the four possible elliptical arcs between two points, the starting point in blue and the ending point in red.

Examples

Here is a nonsensical example of a path consisting of line segments and elliptical arcs. We begin with a horizontal line segment, followed by an arc based on an ellipse with r_x = 20 and r_y = 50 with no rotation. Both flags are set to 0. This is followed by another line segment. Then there is another elliptical arc, again with r_x = 20 and r_y = 50 but with a rotation of 45° clockwise. The path finishes with another horizontal line segment.

More arcs which look like a crescent Moon, a quarter Moon and a gibbous Moon.

Style attributes

This is not an exhaustive list but it does include some of the more commonly used style attributes.

Attribute	Purpose	Value	Default
fill	Control the colour of the area enclosed by lines/curves.	none, colour name, or colour code.	black
fill-opacity	Control the opacity of the area enclosed by lines/curves.	A decimal number between 0 and 1, with values toward 0 more transparent and values toward 1 more opaque.	1
stroke	Control the colour of the line/curve.	none, colour name, or colour code.	black
stroke-dasharray	Control the appearance of a dashed line/curve.	One or more sets of two numbers, the first number in the set giving the length of the dash and the second number in the set giving the length of the space.
stroke-linecap	Control the shape of the end of the line/curve.	Several values are possible, including butt (the line is cut off exactly at the end of the line), round (the line extends slightly past the end and has a rounded appearance), and square (the line extends slightly past the end and has a squared appearance).	butt
stroke-linejoin	Control how the join between two lines/curves is rendered.	Several values are possible, including bevel (flat join), miter (pointed join), and round (rounded join).	miter
stroke-opacity	Control the opacity of the line/curve.	A decimal number between 0 and 1, with values toward 0 more transparent and values toward 1 more opaque.	1
stroke-width	Control the thickness of the line/curve.	A number or a number plus unit of measurement (such as px or em).	1