Learn to draw your own SVG shapes in the browser
The following commands can be used in the d attribute within a path to help you draw your own SVG shapes.
Like so:
<svg viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg">
<path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />
</svg>
This code draws an SVG plus sign (+).
A quick note:
- Capital letter commands, like M, refer to absolutely positioned points.
- Lowercase letter commands, like m, refer to relatively positioned points.
M
moveto
X,Y
Begins the string at an absolute, designated position. If more than one pair of coordinates are provided, it’s as if the other pairs are preceded by an L.
m
moveto
x,y
Same as M, except that if more than one pair of coordinates are provided, extra pairs are processed as if preceded by an l.
L
lineto
X,Y
Draws a line from the last position to the specified position.
l
lineto
x,y
Draws a line from the last position to a relative position: x pixels to the right and y to the bottom.
H
horizontal lineto
x
Draws a horizontal line to the specified, absolute x position.
h
horizontal lineto
x
Draws a horizontal line x pixels to the right (if x is negative, the line is drawn to the left).
V
vertical lineto
y
Draws a vertical line to the specified, absolute y position.
v
vertical lineto
y
Draws a vertical line x pixels to the bottom (if y is negative, the line is drawn to the top).
A
elliptical arc
rx,ry,alpha,large,sweep,x,y
Draws an elliptical arc: rx and ry are the radius of the ellipse; alpha is the x-axis rotation of the ellipse; large is 0 if the arc should be the shorter arc (less than 180°), 1 if it should be the longer arc; sweep is 0 is the arc is to be drawn clockwise, 1 if counter-clockwise; x,y are the coordinate of the end point of the arc.
Q
quadratic Bézier curve
cX cY eX eY
Draws a Bézier quadratic curve. cX,cY are the coordinates of the control point, eX,eY that of the endpoint. More pairs can be provided (extra control points and endpoints).
q
quadratic Bézier curve
cX cY eX eY
Draws a Bézier quadratic curve, with the coordinates of the points relative to the current point.
T
smooth quadratic Bézier curveto
eX eY
Draws a Bézier quadratic curve, using the last provided control point (or failing that the current point).
t
smooth quadratic Bézier curveto
eX eY
Same as T, with the coordinates of the end point relative to the current point.
C
curveto
cX1 cY1 cX2 cY2 eX eY
Draws a Bézier cubic curve, with cX1,cY1,cX2,cY2 being the coordinates of the control points.
c
curveto
cX1 cY1 cX2 cY2 eX eY
Same as C, with the coordinates of the points relative to the current point.
S
smooth curveto
cX2 cY2 eX eY
Draws a Bézier cubic curve, using the previously provided control point (cX1,xY1) or failing that the current point, cX2,cY2 as the next control point, and eX,eY as the end point
s
smooth curveto
cX2 cY2 eX eY
Same as S, with the coordinates of the points relative to the current point.
Z, z
closepath
Close the path by joining the ending point with the beginning point.
Resources:
http://www.jeromecukier.net/wp-content/uploads/2012/10/d3-cheat-sheet.pdf
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
Examples:
http://codepen.io/chrisnager/pen/armzk
Original Medium article:
https://medium.com/@chrisnager/bespoke-svg-reference-e22eb733272