SVG Path Tutorial

By Xah Lee. Date: . Last updated: .

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

<svg width="100" height="100">
<path d="M 0 0 L 50 0 L 0 50 L 90 90"
style="stroke:black; fill:yellow; stroke-width:5" />
</svg>

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]

<svg width="100" height="100">
<path d="M 0 0 L 50 50" />
</svg>
line is invisible, because default stroke style is none

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

<svg width="100" height="100">
<path d="M 0 0 L 50 50" style="stroke:blue" />
</svg>

[see SVG: Shape Styles]

lowercase = relative coordinate

<svg width="100" height="100">
<path d="m 50 0
l  8 5
l -8 5
l  8 5
l -8 5
l  8 5
l -8 5
l  8 5
l -8 5"
style="stroke:black; fill:yellow" />
</svg>

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.

<svg width="100" height="100">
<path d="M 0 0 L 50 50 l 20 -10 l 10 30 m -10 5 l -20 8"
style="stroke:black; fill:none;" />
</svg>

z = close path

<svg width="100" height="100">
<path d="m 10 10 l 0 20 l 30 30 z"
style="stroke:black; fill:yellow" />
</svg>

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.

<svg width="100" height="100">
<path d="M 10 10 h 10 v 10 h 10 v 10 h 10 v 10"
style="stroke:black; fill:yellow" />
</svg>

Shortcut Notations, Comma, Redundant Spaces

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

Elliptical Arcs

SVG Path: Elliptical Arc

Quadratic Bezier Curve

Quadratic bezier curve has just 1 control point.

<svg width="100" height="100">
<path d="M 0 0 Q 100 0 , 100 100"
style="stroke:black; fill:yellow" />
</svg>
<svg width="100" height="100">
<path d="M 0 0 Q 100 0 , 50 50 T 100 100"
style="stroke:black; fill:yellow" />
</svg>

Paths – SVG 1.1 (Second Edition)#PathDataQuadraticBezierCommands

Cubic Bezier Curve

Cubic bezier curve has 2 control points.

<svg width="100" height="100">
<path d="M 0 0 C 100 0, 0 100, 100 100"
 style="stroke:black; fill:yellow" />
</svg>

Paths – SVG 1.1 (Second Edition)#PathDataCubicBezierCommands

Reference

Paths – SVG 1.1 (Second Edition)

SVG tutorial

  1. SVG Basics
  2. Path
  3. Path Elliptical Arc
  4. Specifying Styles
  5. Shape Styles
  6. Viewport
  7. viewBox
  8. Coordinate Transformation
  9. Text Element
  10. Font Size
  11. Structure Elements
  12. Scripting SVG
  13. SVG Clock
  14. Animation
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

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

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog