Revision:
The <path> element is the most powerful element in the SVG library of basic shapes.
It can be used to create lines, curves, arcs, and more.
Paths create complex shapes by combining multiple straight lines or curved lines.
The shape of a <path> element is defined by one parameter: d.
The "d" attribute contains a series of commands and parameters used by those commands.
Each of the commands is instantiated (e.g. creating a class, naming and locating it) by a specific letter.
The "Move to" command is called with the letter M. When the parser runs into this letter, it knows it needs to move to a point. So, to move to (10,10) the command to use would be "M 10 10". After that, the parser begins reading for the next command.
All of the commands come in two variants.
An uppercase letter specifies absolute coordinates on the page.
A lowercase letter specifies relative coordinates (e.g. move 10px up and 7px to the left from the last point).
Coordinates in the "d" parameter are always unitless and hence in the user coordinate system.
There are FIVE line commands for <path> nodes.
- The "Move To" or M command takes two parameters - a coordinate (x) and coordinate (y) - to move to. If the cursor was already somewhere on the page, no line is drawn to connect the two positions. The "Move To" command appears at the beginning of paths to specify where the drawing should start.
syntax:
M x y (or) m dx dy
Codes:
<svg width="200" height="200" style="background-color:lightgrey">
<path d="M10 10"/>
<!-- Points -->
<circle cx="10" cy="10" r="3" fill="red"/>
</svg>
- There are three commands that draw lines.
The "Line To" command - called with L or l - takes two parameters — x and y coordinates — and draws a line from the current position to a new position.
The H or h command draws a horizontal line.
The V or v command draws a vertical line.
The H/h and V/v commands only take one parameter, since they only move in one direction.
syntax:
L x y (or) l dx dy
H x (or) h dx
V y (or) v dy
Codes:
<svg width="200" height="200">
<path d="M 10 10 H 190 V 190 H 10 L 10 10" fill="black" stroke="grey" stroke-width="14"/>
<!-- Points -->
<circle cx="10" cy="10" r="6" fill="red"/>
<circle cx="190" cy="10" r="6" fill="yellow"/>
<circle cx="190" cy="190" r="6" fill="black"/>
<circle cx="10" cy="190" r="6" fill="red"/>
</svg>
- The "Close Path" command, called with Z or z draws a straight line from the current position back to the first point of the path.
It is often placed at the end of a path node, although not always. There is no difference between the uppercase and lowercase command.
syntax:
Z (or) z
Codes:
<svg width="200" height="200">
<path d="M 10 10 H 190 V 190 H 10 Z" fill="black" stroke="grey" stroke-width="14"/>
<!-- Points -->
<circle cx="10" cy="10" r="6" fill="red"/>
<circle cx="190" cy="10" r="6" fill="yellow"/>
<circle cx="190" cy="190" r="6" fill="black"/>
<circle cx="10" cy="190" r="6" fill="red"/>
</svg>
THREE different commands can be used to create smooth curves: two of those curves are Bézier curves, and the third is an "arc" or part of a circle/ellipse.
Bézier curves
The Bézier curves available in <path> elements are a cubic one - called with C or c - and a quadratic one - called with Q or q.
The cubic curve - C or c - is the slightly more complex curve. Cubic Bézier curves take in two control points for each point. Therefore, to create a cubic Bézier, three sets of coordinates need to be specified.
syntax:
C x1 y1, x2 y2, x y (or) c dx1 dy1, dx2 dy2, dx dy
- the last set of coordinates (x,y) specify where the line should end; Codes:
- the other two are control points: (x1,y1) is the control point for the start of the curve, and (x2,y2) is the control point for the end.
- the control points essentially describe the slope of the line starting at each point.
- the Bézier function then creates a smooth curve that transfers from the slope established at the beginning of the line, to the slope at the other end.
example
<svg width="190" height="160" style="background-color:lightgrey; ">
<path d="M 10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
<path d="M 70 10 C 70 20, 110 20, 110 10" stroke="black" fill="transparent"/>
<path d="M 130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
<path d="M 10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
<path d="M 70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
<path d="M 130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
<path d="M 10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
<path d="M 70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
<path d="M 130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
</svg>
The example above creates nine cubic Bézier curves:
- as the curves move toward the right, the control points become spread out horizontally;
- as the curves move downward, the control points become further separated from the end points;
- the thing to note is that the curve starts in the direction of the first control point, and then bends so that it arrives along the direction of the second control point.
Several Bézier curves can be strung together to create extended, smooth shapes.
Often, the control point on one side of a point will be a reflection of the control point used on the other side to keep the slope constant. In this case, a shortcut version of the cubic Bézier can be used, designated by the command S (or s).
syntax:
S x2 y2, x y (or) s dx2 dy2, dx dy
S produces the same type of curve as earlier, but if it follows another S command or a C command, the first control point is assumed to be a reflection of the one used previously.
If the S command doesn't follow another S or C command, then the current position of the cursor is used as the first control point.
The result is not the same as what the Q command would have produced with the same parameters, but is similar.
Codes:
<svg width="290" height="160" style="background-color: lightgrey;">
<path d="M 10 80 C 40 10, 65 10, 135 80 S 200 200, 280 80" stroke="black" stroke-width="4" fill="transparent"/>
</svg>
The quadratic curve - called with Q or q - is actually a simpler Bézier curve than the cubic one.
It requires one control point, which determines the slope of the curve at both the start point and the end point.
It takes two parameters: the control point and the end point of the curve.
syntax:
Q x1 y1, x y (or) q dx1 dy1, dx dy
Codes:
<svg width="290" height="160" style="background-color: lightgrey;">
<path d="M 10 100 Q 135 10 280 100" stroke="black" stroke-width="4" fill="transparent"/>
</svg>
There is a shortcut for stringing together multiple quadratic Bézier curves, called with T.
syntax:
T x y (or) t dx dy
This shortcut looks at the previous control point used and infers a new one from it. After the first control point, fairly complex shapes can be made by specifying only end points.
This only works if the previous command was a Q or a T command. If not, then the control point is assumed to be the same as the previous point, and only lines will be drawn.
Codes:
<svg width="290" height="160" style="background-color: lightgrey;">
<path d="M 10 100 Q 52.5 10, 135 80 T 280 100" stroke="black" stroke-width="4" fill="transparent"/>
</svg>
Arcs
Called with the A or a command, arcs are sections of circles or ellipses.
For a given x-radius and y-radius, there are two ellipses that can connect any two points (as long as they're within the radius of the circle).
Along either of those circles, there are two possible paths that can be taken to connect the points.
So, in any situation, there are four possible arcs available.
Because of that, arcs require quite a few parameters:
syntax:
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
At its start, the arc element takes in two parameters for the x-radius and y-radius.
The final two parameters designate the x and y coordinates to end the stroke.
Together, these four values define the basic structure of the arc.
The third parameter describes the rotation of the arc.
There are still two possible ellipses for the path to travel around and two different possible paths on both ellipses, giving four possible paths, i.e. fourth and fifth parameter.
The fourth parameter is the large-arc-flag, which determines if the arc should be greater than or less than 180 degrees; this flag determines which direction the arc will travel around a given circle.
The fifth parameter is the sweep-flag, which determines if the arc should begin moving at positive angles or negative ones, which essentially picks which of the two circles will be traveled around.
Codes:
<svg width="320" height="320" style="background-color: lightgrey;">
<path d="M 10 315
L 110 215
A 30 50 0 0 1 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10" stroke="black" fill="green" stroke-width="4" fill-opacity="0.5"/>
</svg>
Codes:
<svg style="background-color: lightgrey;" width="320" height="320">
<path d="M 10 315
L 110 215
A 36 60 0 0 1 150.71 170.29
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10" stroke="black" fill="green" stroke-width="4" fill-opacity="0.5"/>
<circle cx="150.71" cy="170.29" r="2" fill="red"/>
<circle cx="110" cy="215" r="2" fill="red"/>
<ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/>
<ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/>
</svg>
Codes:
<svg width="325" height="325" style="background-color:lightgrey; stroke:red; stroke-width:2;">
<path d="M 80 80
A 45 45, 0, 0, 0, 125 125
L 125 80 Z" fill="green"/>
<path d="M 230 80
A 45 45, 0, 1, 0, 275 125
L 275 80 Z" fill="red"/>
<path d="M 80 230
A 45 45, 0, 0, 1, 125 275
L 125 230 Z" fill="purple"/>
<path d="M 230 230
A 45 45, 0, 1, 1, 275 275
L 275 230 Z" fill="blue"/>
</svg>
M x,y: move to the absolute coordinates x,y
m x,y: move to the right x and down y (or left and up if negative values)
L x,y: draw a straight line to the absolute coordinates x,y
l x,y: draw a straight line to a point that is relatively right x and down y (or left and up if negative values)
H x: draw a line horizontally to the exact coordinate x
h x: draw a line horizontally relatively to the right x (or to the left if a negative value)
V y: draw a line vertically to the exact coordinate y
v y: draw a line vertically relatively down y (or up if a negative value)
Z (or) z: draw a straight line back to the start of the path
C cX1,cY1 cX2,cY2 eX,eY: draw a bezier curve based on two bezier control points and end at specified coordinates
c: same with all relative values
S cX2,cY2 eX,eY: basically a C command that assumes the first bezier control point is a reflection of the last bezier point used in the previous S or C command
s: same with all relative values
Q cX,cY eX,eY: draw a bezier curve based on a single bezier control point and end at specified coordinates
q: same with all relative values
T eX,eY: basically a Q command that assumes the first bezier control point is a reflection of the last bezier point used in the previous Q or T command
t same with all relative values
A rX,rY rotation, arc, sweep, eX,eY draw an arc that is based on the curve an oval makes. First define the width and height of the oval. Then the rotation of the oval. Along with the end point, this makes two possible ovals. So the arc and sweep are either 0 or 1 and determine which oval and which path it will take.
a same with relative values for eX, eY
Codes:
<svg width="325" height="325" style="background-color:lightgrey; stroke:red; stroke-width:2;">
<path d="
M 213.1,6.7
c -32.4-14.4-73.7,0-88.1,30.6
C 110.6,4.9,67.5-9.5,36.9,6.7
C 2.8,22.9-13.4,62.4,13.5,110.9
C 33.3,145.1,67.5,170.3,125,217
c 59.3-46.7,93.5-71.9,111.5-106.1
C 263.4,64.2,247.2,22.9,213.1,6.7
z" />
</svg>
Codes:
<svg class="icon icon--plus" viewBox="0 0 5 5" style="display:inline-box;
vertical-align:middle; background-color: cornflowerblue;">
<path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" fill="gold"
stroke="gold" stroke-width="0.1" stroke-linejoin="round"/>
</svg>