skip to content

Writing SVG Paths

The <path> in SVG is by far the most versatile drawing element. You can draw everything from lines and squares to triangles and circles. Basically, if you can imagine a shape, you can draw it with SVG <path>.

An example path would look something like this:

<path
 d="M1.37109375,165.960938 C44.4153646,263.429688 122.199219,312.164063 234.722656,312.164063 C347.246094,312.164063 421.278646,263.429688 456.820312,165.960938 L234.722656,0.71484375 L1.37109375,165.960938 Z"
 id="Path"
 stroke="#979797"
></path>

Reformatting the above, so we can make sense of it:

<path
 d="
  M 1.37109375,165.960938 
  C 44.4153646,263.429688 122.199219,312.164063 234.722656,312.164063 
  C 347.246094,312.164063 421.278646,263.429688 456.820312,165.960938 
  L 234.722656,0.71484375 
  L 1.37109375,165.960938 
  Z"
>
</path>

The letters represent an "svg command" and the numbers represent the value or coordinate of said command.

Example from above




##SVG Path Commands Explained

M X,Y

Move to the absolute X and Y coordinates

<path d="M 10,10 Z" />

m X,Y

Move to the right x and down y (or left and up if negative values)

<path d="M 5,5 Z m 10,10 z" />

L X,Y

Draw a straight line to the absolute coordinates x,y

<path d="M 5,5 L 12,12" />

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)

<path d="M 5,5 l 12,12" />

H X

Draw a line horizontally to the exact coordinate x

<path d="M 5,10 H 10" />

h X

Draw a line horizontally relatively to the right x (or to the left if a negative value)

<path d="M 5,10 h 10" />

V Y

Draw a line vertically to the exact coordinate y

<path d="M 10,5 V 10" />

v Y

Draw a line vertically relatively down y (or up if a negative value)

``

Z / z Y

Draw a straight line back to the start of the path

<path d="M 5,5 V 15 h 10 Z" />

C cX1,cY1 cX2,cY2 eX,eY

Draw a bezier curve based on two bezier control points and end at specified coordinates

<path d="M 3,3 C 3,20 17,20 17,3" />

c cX1,cY1 cX2,cY2 eX,eY

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

<path d="M 3,17 S 3,3 16,12" />

s cX2,cY2 eX,eY

Same with all relative values

<path d="M 3,17 s 1,-14 13,-4" />

Q cX,cY eX,eY

Draw a bezier curve based a single bezier control point and end at specified coordinates

<path d="M 3,17 Q 10,3 17,17" />

q cX,cY eX,eY

Same with all relative values

<path d="M 3,17 q 7,-14 14,0" />

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

<path d="M 2,12 Q 6,1 10,12 T 18,12" />

t eX,eY

Same with all relative values

<path d="M 2,12 Q 6,1 10,12 t 8,0" />

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.

<path d="M 2,10 A 1,1 40 1 0 18,10" />

a rX,rY rotation, arc, sweep, eX,eY

Same with all relative values

<path d="M 2,10 a 1,1 40 1 0 16,0" />

Source (css-tricks.com)




Drawing SVG by hand

Example 1

<svg viewBox="0 0 100 100">
 <path
  d="
        M 25,40
        L 65,40
        L 65,65
        L 50,65
        Z
    "
 />
</svg>

Example 2

<svg viewBox="0 0 100 100">
 <path
  d="
        M 50,50
        L 60,25
        L 40,25
        Z
    "
 />
</svg>

Example 3

<svg viewBox="0 0 64 64" stroke-width="10" stroke-linecap="round">
 <path
  d="
        M 7,12 
        L 57,12 
        M 7,32 
        L 57,32 
        M 7,52 
        L 57,52"
 />
</svg>

Example 4

<svg viewBox="0 0 100 100">
 <path
  d="
        M 25,25
        S 75,25 75,75
        L 25,75
        L 50,50
        S 25,50 25,25
    "
 />
</svg>




Drawing SVG in real life

I've put my newly acquired skills to use, and made a few SVG icons by hand

See the Pen Handdrawn SVG by Tristan White (@triss90) on CodePen.

If you're looking to hone your SVG skills, CSS-Tricks has a great article, which goes into detail on the subject.