Bespoke SVG Reference

Chris Nager
May 23, 2014 · 3 min read

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.



    Chris Nager

    Written by

    Senior software developer @myaircamera / formerly @iex and @salesforce

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade