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