Arcs are essentially sections of circles or ellipses. A rx ry x-axis-rotation large-arc-flag sweep-flag x y a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
The shape of a path element is defined by one attribute, d.
Move to command is called by letter M. <path d="M10 10">
There are three commands that draw actual lines. "line to" command. L x y (or l dx dy). H for horizontal line and V for vertical line. H x (or h dx). V x (or v dy)
We can shorten the above svg path by using Z "Close Path" command.
Cubic Beziers take in two control points for each point. As such, you have to specify three sets of coordinates when you want to create a cubic Bezier. C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy) x1 y1 = control point for start of your curve x2 y2 = end point of your curve (middle of the path) x y = where you want the line to end
You can string several Bezier curves to create long smooth shapes. Often in this case, the control point on one side of a point will be a reflection of the control point used on the other side (to keep the slope constant) S x2 y2, x y (or s dx2 dy2, dx dy) S produces the same type of curve as earlier, but if it follows another S command or a C command the first control point is assumed to be a reflection of the one used previously. If the S command doesn't follow another S or C command, then it is assumed that both control points for the curve are the same.
Quadratic Bezier requires only one control point.It takes two arguments the control point and the end point of the curve. Q x1 y1, x y (or q dx1 dy1, dx dy)
As with the cubic Bezier curve, there is a shortcut for stringing together long sets of them quadratic Beziers, T. T x y (or t dx dy)