I don't understand the path attributes and how they are used. It's so confusing

Question

Path svg

Answer 1

Have you tried the comments section of the lesson? You should find some nice explanations there.

With the path element you can draw using a virtual pencil. The "d" attribute specifies commands and the coordinates where those commands take place. Take a close look at Steve Sajeev's answer.

The best way to understand the path element is to try it yourself, so take your browser and code editor and start playing with the code!

Some tutorials made by the community that might help you:

Path tutorial
https://code.sololearn.com/W8hasCeVMxD0/?ref=app

SVG tutorial with a dedicated Path section
https://code.sololearn.com/Wnc1H3jaH0ua/?ref=app

Answer 2

The <path> element is used to define a path.

The following commands are available for path data:

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

Note: All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned.