
SVG 'path' element
The SVG <path> element is used for drawing of advanced shapes combined with lines and arcs. The
<path> element has 2 attributes:

d attribute or path data specifies all drawings inside the <path> element be means of
its commands.
The d attribute contains the moveto, line, curve (both cubic and quadratic Beziers), arc
and closepath instructions. The instructions are expressed with one character that can be omitted if the same command is used
several times in a row. Uppercase character means absolute coordinates, lowercase means relative coordinates.
pathLength attribute provides the total length of the path.
The path data has the following commands:
Command 
Parameters 
Name 
Description 
M/m 
x, y 
moveto 
Establishes a new current point at the given coordinates withought drawing. when it is not the first command, starts a new subpath
at the given (x,y) coordinate.

Z/z 
none 
closepath 
Ends the current subpath drawing automatically straight line from the current point to the initial point of the current subpath. 
L/l 
x, y 
lineto 
Draws a line from the current point to the given (x,y) coordinate. A new point becomes the current point. 
H/h 
x 
horizontal lineto 
Draws a horizontal line from the current point to the point that has the given x coordinate.
The y coordinate remains the same.

V/v 
y 
vertical lineto 
Draws a vertical line from the current point to the point that has the given y coordinate.
The x coordinate remains the same. 
C/c 
x1, y1 x2, y2 x, y 
curveto 
Draws a cubic Bezier curve from the current point to (x,y) using (x1,y1) and (x2,y2) as
the control points at the beginning and at the end of the curve. The (x,y) point becomes a new current point.

S/s 
x2, y2 x, y 
smooth/shorthand curveto 
(x2,y2) is the control point at the end of the curve that is drawn from the current point to (x,y) . 
Q/q 
x1, y1 x, y 
quadratic Bezier curveto 
Draws a quadratic Bezier curve from the current point to (x,y) using (x1,y1) as the control point.
The (x,y) point becomes a new current point.

T/t 
x, y 
smooth/shorthand quadratic Bezier curveto 
Draws a quadratic Bezier curve from the current point to (x,y) . The control point is assumed to be the reflection
of the control point on the previous command relative to the current point or the current point could be the control one.

A/a 
rx, ry xaxisrotation largearcflag sweepflag x y 
elliptical arc 
Draws an elliptical arc from the current point to (x, y) . rx and ry are two radii that define
the size and orientation of the ellipse. An xaxisrotation indicates how the ellipse is rotated relative to the current
coordinate system. The center (cx, cy) of the ellipse is calculated automatically. largearcflag and sweepflag
help the automatic calculations and determine how the arc is drawn if arcs cross.

Here is an example that shows the usage of lineto, quadratic Bezier curveto and elliptical arc commands:
<path d="M10,40 A20 30 180 0 1 30 10 A20 30 0 0 1 30 70 A20 30 0 0 1 40 10 A20 30 0 0 1 40 70 A20 30 0 0 1 50 10 A20 30 0 0 1 70 40 L100 40 Q110 10 120 50" fill="none" stroke="#9d1d20" strokewidth="2"/>
Here is the resulting image:

