SVG Path

Description of the <path> element

The SVG <path> element specifies a path.

Paths are used to create complex shapes combining several straight or curved lines. Complex shapes that consist only of straight lines can be created as polylines. Polylines and paths create similar shapes. However, polylines need smaller straight lines for simulating curves.

Creating complex paths using an XML editor or text editor is not suggested, because understanding how they work helps to notice and fix display issues in SVGs.

The shape of a path element is specified by one parameter: d containing other commands and parameters used by those commands. You can find the list of the commands below:

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

All of these commands can also be executed with lower letters. Capital letters mean an absolutely positioned shape, whereas lower cases mean a relatively positioned shape.

Example of the SVG <path> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg  width="300" height="250">
      <path d="M190 40 L115 240 L265 240 Z" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>