Easy to use

d： Path process .
stroke-width： Line width .
stroke： line color .

Path process ：
M 0 0： Move to 0,0
L 100 100： Draw a line to 100,100

<path d="M 0 0 L 100 100" stroke-width="2" stroke="red"/>

effect ：

Straight path

Move brush

M x y： Move to coordinates .
m dx dy： Move a distance .

Draw a straight line

L x y： Draw lines to coordinates .
l dx dy： Draw a line a distance .

H x： Level to x coordinate .
h dx： Level dx distance .

V y： Vertical line to y coordinate .
v dy： A vertical bar dy distance .

Closed path

Z
z
Will draw a line to the beginning of the path .

Case study ： Five-pointed star

A few points of the pentagram ：

50 0
98 35
79 91
21 91
2 35

Then drawing a five pointed star is ：
135241

<path d=" M 50 0 L 79 91 L 2 35 L 98 35 L 21 91 Z " fill="red"/>

effect ：

Curve path

Twice Bessel

A control point , One point .

Q x1 y1, x y
q dx1 dy1, dx dy

Reuse the previous control point .

T x y (or t dx dy)

Three times Bessel

Two control points , One point .

C x1 y1, x2 y2, x y
c dx1 dy1, dx2 dy2, dx dy

Reuse the previous control point .

S x2 y2, x y
s dx2 dy2, dx dy

arc

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

rx ry： Two radii .
x-axis-rotation： Rotation Angle .
large-arc-flag：0 The one with a small angle ,1 The one with a large angle .
sweep-flag：0 Anti-clockwise ,1 Clockwise .
x y,dx dy： End coordinates .

Case study ： arc

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" >
	<path d="M80 80 a 45 45, 0, 0, 0, 45 45 Z" fill="red"/>
	<path d="M230 80 a 45 45, 0, 1, 0, 45 45 Z" fill="red"/>
	<path d="M80 230 a 45 45, 0, 0, 1, 45 45 Z" fill="red"/>
	<path d="M230 230 a 45 45, 0, 1, 1, 45 45 Z" fill="red"/>
</svg>

effect ：
The small one used for both on the left . The big one on the right .
Both of them go counterclockwise . Lower clockwise .

How to understand ？
A line from the beginning to the end , To card a circle with a specified radius .
The size of the block determines whether to use a large part or a small part .
Clockwise or counterclockwise determines whether the center of the circle is on the left or right .