SVG #3 curve with path and c

1 Drawing a straight line with&path>element

<path d="M 0 0 L 10 10 Z" stroke="black" fill="none"/>

There must be d attribute.

-M is moving to

-L is line to

-Z is end

2 Drawing disconnected lines

<path d="M 0 0 L 10 10 M 30 5 L 30 0 Z" stroke="black" fill="none"/>

We can use M again to move to another point to start another line segment.

3 Drawing a curve

<path d="M 10 40 C 10 50 40 50 40 40 Z" stroke="black" fill="none"/>

Use C for curve

C takes four pairs of coordinates

Point-Start C Control-One Control-Two Point-End

>> Next lesson >>