### Path

**Next ❯**Image

*turned_in_not*Path Related Tag`<path>`

##### <path>

Used to draw a path on svg, default fill color is black

**Syntax**

`<path d="commands & parameters" />`

*label_outline*Path Attribute**d**- contains a series of commands and parameters used by those commands

*label_outline*Path Attribute Commands**M**- To move,**L, H, V**- For line,**Q, T**- For quadratic bezier curve,**C, S**- For cubic bezier curve,**A**- For Elliptical Arc,**Z**- To close path

##### To Move

**Syntax - To move at (x,y)**

`M x y`

**Syntax - To move distance dx (along x-axis), dy (along y-axis)** from last point in path (if any)

`m dx dy`

- Also used to break a continue path

```
<svg height="100" width="200">
<path d="M10 40 L100 40
M20 80 L100 80" style="stroke:red;stroke-width:2" />
</svg>
```

##### For Line

**Syntax - To draw line to (x,y)**, from last point in path

`L x y`

**Syntax - To draw line distance dx (along x-axis), dy (along y-axis)** from last point in path

`l dx dy`

**Syntax - To draw horizontal line to point x** from last point in path

`H x`

**Syntax - To draw horizontal line distance dx (along x-axis)** from last point in path

`h dx`

**Syntax - To draw vertical line to point y** from last point in path

`V y`

**Syntax - To draw vertical line distance dy (along y-axis)** from last point in path

`v dy`

```
<svg height="100" width="200">
<path d="M10 10 L100 10 l40 20 H30 V50 h40 v30"
style="stroke:red;stroke-width:2;fill:none" />
</svg>
```

##### For quadratic bezier curve

**Syntax - To draw quadratic bezier curve to (x,y)**, from last point in path

`Q cp1x cp1y, x y`

**Syntax - To draw quadratic bezier curve to distance dx (along x-axis), dy (along y-axis)** from last point in path

`q cp1dx cp1dy, dx dy`

**Syntax - To continue last quadratic bezier curve to (x,y)**, from last quadratic bezier curve point

`T x y //If used with "Q, q, T, t" otherwise act as "L"`

**Syntax - To continue last quadratic bezier curve to distance dx (along x-axis), dy (along y-axis)** from last quadratic bezier curve point

`t dx dy //If used with "Q, q, T, t" otherwise act as "l"`

*label_outline*More Detailed**cp1x, cp1y**- Control point 1 along XY-axis**x, y**- End point along XY-axis**cp1dx, cp1dy**- Control point 1 distance along XY-axis from last point in path**dx, dy**- End point distance along XY-axis from last point in path

* For T curve if continue with Q curve,**cp1x, cp1y**is the reflection of**cp1x, cp1y of Q**

**cp1x**= 2(x)^{of Q curve}- (cp1x)^{of Q curve}

**cp1y**= 2(y)^{of Q curve}- (cp1y)^{of Q curve}

* Black curve is made by "Q" and Smooth red curve after that is made by using "T"

```
<svg height="100" width="200">
<path d="M20 40 Q50 90 130 40 T180 40"
style="stroke:black;stroke-width:2;fill:none"/>
</svg>
```

##### For cubic bezier curve

**Syntax - To draw cubic bezier curve to (x,y)**, from last point in path

`C cp1x cp1y, cp2x cp2y, x y`

**Syntax - To draw cubic bezier curve to distance dx (along x-axis), dy (along y-axis)** from last point in path

`c cp1dx cp1dy, cp2dx cp2dy, dx dy`

**Syntax - To continue last cubic bezier curve to (x,y)**, from last cubic bezier curve point

`S cp2x cp2y, x y //If used with "S, s, C, c" otherwise S cp1x cp1y, x y //Act as "Q" `

**Syntax - To continue last cubic bezier curve to distance dx (along x-axis), dy (along y-axis)** from last cubic bezier curve point

`s cp2dx cp2dy, dx dy //If used with "S, s, C, c" otherwise s cp1dx cp1dy, dx dy //Act as "q" `

*label_outline*More Detailed**cp1x, cp1y**- Control point 1 along XY-axis**cp2x, cp2y**- Control point 2 along XY-axis**x, y**- End point along XY-axis**cp1dx, cp1dy**- Control point 1 distance along XY-axis from last point in path**cp2dx, cp2dy**- Control point 2 distance along XY-axis from last point in path**dx, dy**- End point distance along XY-axis from last point in path

* For S curve if continue with C curve,**cp1x, cp1y**is the reflection of**cp2x, cp2y of C**

**cp1x**= 2(x)^{of C curve}- (cp2x)^{of C curve}

**cp2y**= 2(y)^{of C curve}- (cp2y)^{of C curve}

* Black curve is made by "C" and Smooth red curve after that is made by using "S"

```
<svg height="100" width="200">
<path d="M20 80 C130 10, 160 120, 190 40 S200 140, 230 40"
style="stroke:black;stroke-width:2;fill:none"/>
</svg>
```

##### For Elliptical Arc

**Syntax - To draw elliptical arc to (x,y)**, from last point in path

`A rx ry rotateX largeArcFlag sweepFlag x y`

**Syntax - To continue draw elliptical arc ** from last elliptical point in path drawn with **A**

`rx ry rotateX largeArcFlag sweepFlag x y`

**Syntax - To draw elliptical arc to distance dx (along x-axis), dy (along y-axis)** from last point in path

`a rx ry rotateX largeArcFlag sweepFlag dx dy`

**Syntax - To continue draw elliptical arc ** from last elliptical point in path drawn with **a**

`rx ry rotateX largeArcFlag sweepFlag dx dy`

*label_outline*More Detailed**rx, ry**- Minimum radius of ellipse along XY-axis**rotateX**- Ellipse rotational degree along X-axis**largeArcFlag**- Value can be**0**(select smaller part of ellipse) or**1**(select bigger part of ellipse)**sweepFlag**- Value can be**0**(draw in negative direction) or**1**(draw in positive direction)**x, y**- End point along XY-axis**dx, dy**- End point distance along XY-axis from last point in path

*label_outline*For More**largeArcFlag**- Value can be :**0**(select smaller part of ellipse) or**1**(select bigger part of ellipse)**sweepFlag**- Value can be :**0**(draw in negative direction) or**1**(draw in positive direction)

```
<svg height="100" width="200">
<path d="M90 20 A 40 40 0 1 1 90 80"
style="stroke:yellow;fill:blue;stroke-width:4;"/>
</svg>
```

##### To close path

**Syntax - To join your first and last point of path**

`Z //or you can use 'z' to set relative point to any next point(if any)`

```
<svg height="100" width="200">
<path d="M10 50 L100 50 v30 z" style="stroke:red;stroke-width:2" />
</svg>
```

**Helper!**In general all path attribute commands with**UPPERCASE**: denotes the ACTUAL POINT, and**lowercase**: denotes the DISTANCE from last point

**❮ Prev**Text

**Next ❯**Image