by ...

# Lesson n:

Paths are the most flexible and consequently the most complicated of the SVG elements. In fact, all of the element types from the previous lesson could be made using `path`s.

## The Basics

Paths in SVG are made by inputting a sequence of data points together with commands that determine how the points will be connected.

## Path Commands

Command Parameters Name Description Example
M (m) x,y (dx,dy) moveto Moves to new location without drawing.
L (l) x,y (dx,dy) lineto Draws a line from current location to new location.
H (h) x (dx) horizontal lineto Draws a horizontal line from current location to new location.
V (v) y (dy) vertical lineto Draws a vertical line from current location to new location.
Q (q) cx,cy x,y (cdx,cdy dx,dy) quadratic Bezier curveto Draws a quadratic Bezier curve from current location to x,y. cx,cy is the point controlling the bend of the curve.
T (t) x,y (dx,dy) shorthand quadratic Bezier curveto Draws a quadratic Bezier curve from current location to x,y. The last specified control point is used to control the bend of the curve.
C (c) cx1,cy1 cx2,cy2 x,y (cdx1,cdy1 cdx2,cdy2 dx,dy) cubic Bezier curveto Draws a cubic Bezier curve from current location to x,y. cx1,cy1 and cx2,cy2 are the points controlling the bend of the curve.
S (s) cx2,cy2 x,y (cdx2,cdy2 dx,dy) shorthand cubic Bezier curveto Draws a cubic Bezier curve from current location to x,y. cx2,cy2 is the 2nd point controlling the bend of the curve. The first control point is the 2nd control point from the previous command.
A (a) rx,ry x-axis-rotation large-arc-flag sweepflag x,y (rdx,rdy x-axis-rotation large-arc-flag sweepflag dx,dy) elliptical arc Draws an ellipital arc from the current position to x,y.

A
Elliptical Curve
`A rx,ry x-axis-rotation large-arc-flag sweep-flag x,y`
In most situations, there are four possible arcs that may be drawn from the given variables. `large-arc-flag` and `sweep-flag` determine what kind of arc are drawn, and are defined by either a `0` or a `1`.