# SVG Path Tutorial

This page is a tutorial on SVG path element.

The path element is the most powerful and useful element. It can
effectively replace any other SVG shapes such as {`rect`

,
`circle`

, `line`

, `polygon`

}.

Path element is also the most complex to understand. If you are scripting SVG with JavaScript, it's essential to understand the path element.

## moveto, lineto

`M`

→ Move the pen to`x``y``x``y`.`L`

→ Draw a line to`x``y``x``y`.

- Paths – SVG 1.1 (Second Edition)#PathDataMovetoCommands
- Paths – SVG 1.1 (Second Edition)#PathDataLinetoCommands

## Path's Default Stroke Style

**Warning**: By default, path's `stroke`

style is `none`

. So, you will need to add `style="stroke:red"`

or similar. [see SVG: Shape Styles]

Here's a example of the same line, with style added.

[see SVG: Shape Styles]

## lowercase = relative coordinate

Lowercase command names mean use relative coordinates (relative to current point).
So, here, we use `l`

to zigzag. Each time, the y coordinate increases by 5, while x goes 8 to the right and -8 to the left.

Lowercase and uppercase commands can be mixed.

## z = close path

`z`

→ Close path. Draw a line to the beginning point.

Paths – SVG 1.1 (Second Edition)#PathDataClosePathCommand

## Shortcut Notation for Horizontal Line, Vertical Line

Horizontal line has a shortcut notation. Instead of `L 30 0`

, you can write `H 30`

. Similarly for vertical lines.

`H`

→ Horizontal line to. The y coordinate is the same as current point's y coordinate.`x``h`

→ Horizontal line to,`x``x`units relative to current point.

`V`

→ Vertical line to. The x coordinate is the same as current point's x coordinate.`y``v`

→ Vertical line to,`y``y`units relative to current point.

## Shortcut Notations, Comma, Redundant Spaces

Redundant space between command letter or before negative number can be omitted. Example:

`M7 8L3 4`

is the same as`M 7 8 L 3 4`

.`L3-4`

is the same as`L 3 -4`

.`L`

can be followed by multiple pairs of numbers.`L 3 4 5 6`

is the same as`L 3 4 L 5 6`

.- Space and Comma are interchangeable.
`L 3 4 5 6`

is the same as`L 3 4, 5 6`

or`L 3,4,5,6`

.

## Elliptical Arcs

## Quadratic Bezier Curve

Quadratic bezier curve has just 1 control point.

`Q`

→ Draw quadratic bezier curve to {`a1``a2``x``y``x`,`y`}, with control point at {`a1`,`a2`}.`q`

→ (relative coordinate).

`T`

→ Same as Q, except the control point is a reflection of previous Q's, and if none, use current point.`x``y``t`

→ (relative coordinate).

Paths – SVG 1.1 (Second Edition)#PathDataQuadraticBezierCommands

## Cubic Bezier Curve

Cubic bezier curve has 2 control points.

`C`

→ Draw cubic bezier curve to {`a1``a2``b1``b2``x``y``x`,`y`}, with control points {`a1``a2`} and {`b1``b2`}.`c`

→ (relative coordinate).`S`

→ Same as C, except that first control point is last C's ending control point reflected thru current point. If last command is not C, then use current point as first control point.`b1``b2``x``y``s`

→ (relative coordinate).

Paths – SVG 1.1 (Second Edition)#PathDataCubicBezierCommands

## Reference

Paths – SVG 1.1 (Second Edition)

#### SVG tutorial

- SVG Basics
- Path
- Path Elliptical Arc
- Circle Arc
- Specifying Styles
- Shape Styles
- Viewport
- viewBox
- ViewBox Unit Size
- Coordinate Transformation
- Text Element
- Font Size
- Structure Elements
- Scripting SVG
- SVG Clock
- Animation

#### Canvas Intro

If you have a question, put $5 at patreon and message me.