# SVG path overview

Reading time: 10 min

Content List

Have a quick overview of path commands and parameters, and general concepts required to understand the path

In the *structure* of *path* in SVG, there are multiple *commands* defined inside the path **tag** in the **d attribute.**

Each command works as *coordinate* of a point in the page, like an (*x*, *y*) in chart, so each, needs a **starting point** and an **ending point** at least.

### Quick list and explanation of commands in SVG

**M**(*moveto*): The starting point of the whole path- M
- (x , y): ending point

**L**(*lineto*): Draw a line- L
- (x , y): ending point

**H**(*horizontal lineto*) /**V**(*vertical lineto*): By giving the coordinates as H(x) V(y) it draws a triangle from the starting point then to the H and then to V, (They come together)- H(x)
- V(y)

**C**(*curveto*): With this command you can create curved Corner, but using 3 sets of coordinates, so that you can create the correct curvature as you wish- C
- (x1 , y1)
- (x2 , y2)
- (x , y): ending point

**S**(*smooth curveto*): comes with the*curveto*command- S
- (x1 , y1)
- (x , y): ending point

**Q**(*quadratic Bézier curve*): simply, unlike the curveto(C) command, we have only one coordinate to define the curve- Q
- (x1 , y1)
- (x , y): ending point

**T**(*smooth quadratic Bézier curve*): comes with the*quadratic Bézier curve*command- T
- (x , y): ending point

**A**(*elliptical Arc*): This one works with two elliptical, and then highlights the relation/difference between them- A
- (x1, y1)
- rotate
- large_arc_flag:(1 or 0) , sweep_flag(1 or 0)
- (x , y): ending point

### Starting and ending points

All the commands have a starting point and an ending point

The starting point of each command is defined before the starting of each command,

### Absolute and Relative

There are two methods to define each coordinate, one known as Absolute, in which the coordinates are calculated from the starting of page(chart) or point (0 , 0); as for relative, the coordinates are calculated based on the last given command.

In order to distinguish the absolute path from relative path, you can look at the command name, if it is in capital format of alphabet character, then it is absolute, otherwise, relative.

## Was this page helpful?

What was the most helpful point of this page for you?

Thanks for your cooperation!

## Leave a Reply