pelicin › web › SVG

Path

The <path> element is the generic element to define a shape. All basic shapes (including curves and arcs) can be created using <path>.

SVG elements

<path>

  • d — defines the shape/coordinates of the path (see path commands below)
  • pathLength — when drawing the stroke, assume the the total length of the path is this number instead of the actual length (e.g. for use with stroke-dasharray)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <path fill="hotpink" d="
    M 10,30
    A 20,20 0,0,1 50,30
    A 20,20 0,0,1 90,30
    Q 90,60 50,90
    Q 10,60 10,30
    z
  " />
</svg>
| LIVE PREVIEW

Path commands

For the d attribute, you define the drawn path using these commands.

Note that all commands are case-sensitive:

  • uppercase command (e.g. M) means absolute coordinate
  • lowercase command (e.g. m) means relative coordinate (relative to the last point)

Move-to (M)

  • M x,y — move the current point to (x,y)(x, y)
  • m dx,dy — if the current point is (x0,y0)(x_0, y_0), move the current point to (x0+dx,y0+dy)(x_0 + dx, y_0 + dy)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <path stroke="black" stroke-width="5" d="
    M 0,10 H 100
    M 0,50 H 100
    M 0,90 H 100
  " />
</svg>
| LIVE PREVIEW

Line-to (L, H, V)

  • L x,y — draw a line from the current point (x0,y0)(x_0, y_0) to (x,y)(x, y)
  • l dx,dy — draw a line from the current point (x0,y0)(x_0, y_0) to (x0+dx,y0+dy)(x_0 + dx, y_0 + dy)
  • H x — draw a horizontal line from the current point (x0,y0)(x_0, y_0) to (x,y0)(x, y_0)
  • h dx — draw a horizontal line from the current point (x0,y0)(x_0, y_0) to (x0+dx,y0)(x_0 + dx, y_0)
  • V y — draw a vertical line from the current point (x0,y0)(x_0, y_0) to (x0,y)(x_0, y)
  • v dy — draw a vertical line from the current point (x0,y0)(x_0, y_0) to (x0,y0+dy)(x_0, y_0 + dy)

Cubic Bézier curve (C, S)

  • C x1,y1 x2,y2 x,y — draw a Bézier curve from the current point (x0,y0)(x_0, y_0) to (x,y)(x, y), using (x1,y1)(x_1, y_1) as the start control point and (x2,y2)(x_2, y_2) as the end control point
  • c dx1,dy1 dx2,dy2 dx,dy — draw a Bézier curve from the current point (x0,y0)(x_0, y_0) to (x0+dx,y0+dy)(x_0 + dx, y_0 + dy), using (x0+dx1,y0+dy1)(x_0 + dx_1, y_0 + dy_1) as the start control point and (x0+dx2,y0+dy2)(x_0 + dx_2, y_0 + dy_2) as the end control point
  • S x2,y2 x,y — draw a smooth Bézier curve from the current point (x0,y0)(x_0, y_0) to (x,y)(x, y), using reflection of the end control point of the previous curve command as the start control point and (x2,y2)(x_2, y_2) as the end control point
  • s dx2,dy2 dx,dy — draw a smooth Bézier curve from the current point (x0,y0)(x_0, y_0) to (x0+dx,y0+dy)(x_0 + dx, y_0 + dy), using reflection of the end control point of the previous curve command as the start control point and (x0+dx2,y0+dy2)(x_0 + dx_2, y_0 + dy_2) as the end control point
Illustration of a Cubic Bézier curve and its control points P_1 and P_2
Illustration of a Cubic Bézier curve and its control points P1P_1 and P2P_2 (Source: Wikipedia)

Quadratic Bézier curve (Q, T)

  • Q x1,y1 x,y — draw a Bézier curve from the current point (x0,y0)(x_0, y_0) to (x,y)(x, y), using (x1,y1)(x_1, y_1) as the control point
  • q dx1,dy1 dx,dy — draw a Bézier curve from the current point (x0,y0)(x_0, y_0) to (x0+dx,y0+dy)(x_0 + dx, y_0 + dy), using (x0+dx1,y0+dy1)(x_0 + dx_1, y_0 + dy_1) as the control point
  • T x,y — draw a smooth Bézier curve from the current point (x0,y0)(x_0, y_0) to (x,y)(x, y), using reflection of the control point of the previous curve command as the control point
  • t dx,dy — draw a smooth Bézier curve from the current point (x0,y0)(x_0, y_0) to (x0+dx,y0+dy)(x_0 + dx, y_0 + dy), using reflection of the control point of the previous curve command as the control point
Illustration of a Cubic Bézier curve and its control point P_1
Illustration of a Cubic Bézier curve and its control point P1P_1 (Source: Wikipedia)

Elliptical arc curve (A)

Note that for any given two points (x0,y0)(x_0, y_0) and (x1,y1)(x_1, y_1), generally, there are 2 possible ellipses with radii rxr_x and ryr_y and rotation θ\theta that can be drawn that passes through those points.*

Each ellipse has 2 possible arcs that can be drawn (the "large" and the "small" arc), giving us a total of 4 arcs to choose from.

  • A rx ry angle large-arc-flag sweep-flag x y — draw an arc of an ellipse from the current point (x0,y0)(x_0, y_0) to (x,y)(x, y), given:
    • rx (the radius of the ellipse in the x-axis)
    • ry (the radius of the ellipse in the y-axis)
    • angle (rotation of the ellipse relative to the x-axis)
    • large-arc-flag (set 1 to choose the "large" arc, or 0 to choose the "small" arc)
    • sweep-flag (set 1 to choose the "clockwise" arc when moving from the start point to the end point, or 0 to choose the "counter-clockwise" arc)
  • A rx ry angle large-arc-flag sweep-flag dx dy — draw an arc of an ellipse from the current point (x0,y0)(x_0, y_0) to (x0+dx,y0+dy)(x_0 + dx, y_0 + dy), given the same parameters as above
Illustration of the two possible ellipses that passes through the given 2 points (given the ellipse parameters), and how large-arc-flag and sweep-flag selects which arc to be drawn.
Illustration of the two possible ellipses that passes through the given 2 points (given the ellipse parameters), and how large-arc-flag and sweep-flag selects which arc to be drawn. (Source: W3)

(*) If the ellipse's radii is not "big enough" to reach the two points, the ellipse's radii will be "minimally enlarged" to reach the two points (MDN).

Close path (Z)

  • Z or z — Close the path by connecting the last point of the path with its initial point. (If the two points are at different coordinates, a straight line is drawn between them.)

References