Bespoke SVG Reference

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.

<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>
  • Lowercase letter commands, like m, refer to relatively positioned points.

M

moveto

m

moveto

L

lineto

l

lineto

H

horizontal lineto

h

horizontal lineto

V

vertical lineto

v

vertical lineto

A

elliptical arc

Q

quadratic Bézier curve

q

quadratic Bézier curve

T

smooth quadratic Bézier curveto

t

smooth quadratic Bézier curveto

C

curveto

c

curveto

S

smooth curveto

s

smooth curveto

Z, z

closepath

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

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