SVG Path Segment Token Array Syntax Structure

This article provides an overview of the syntax structure used for SVG path segment token arrays, which represent parsed SVG path data (d attribute) in programmatic environments. You will learn how commands and parameters are tokenized, the standard array schema used by modern parsers and graphical libraries, and the exact parameter orders required for every standard SVG path command type.

Definition of an SVG Path Segment Token Array

An SVG path segment token array is a two-dimensional array (or list of tuples) where an entire SVG path string is broken down into individual, ordered commands. Each sub-array represents a single path segment consisting of a command identifier followed by its corresponding numeric arguments.

[
  ['M', x, y],
  ['C', x1, y1, x2, y2, x, y],
  ['Z']
]

In this structure: - The first element (index 0) is always a single-character string representing the SVG command. - The remaining elements are numeric values representing coordinate points, control points, angles, or binary flags.

Command Token Case Sensitivity

The command token indicates whether coordinates are interpreted as absolute or relative values: - Uppercase tokens (M, L, C, etc.) denote absolute coordinates, positioning points directly within the current SVG user coordinate system. - Lowercase tokens (m, l, c, etc.) denote relative coordinates, positioning points relative to the end point of the previous command.

Segment Token Structure by Command Type

Each SVG command enforces a strict sequence and number of parameter tokens within its segment array.

1. MoveTo (M / m)

Sets a new current point without drawing a line. - Syntax: ['M', x, y] or ['m', dx, dy] - Length: 3 items

2. LineTo (L / l)

Draws a straight line from the current point to the target point. - Syntax: ['L', x, y] or ['l', dx, dy] - Length: 3 items

3. Horizontal LineTo (H / h)

Draws a horizontal line from the current point along the X-axis. - Syntax: ['H', x] or ['h', dx] - Length: 2 items

4. Vertical LineTo (V / v)

Draws a vertical line from the current point along the Y-axis. - Syntax: ['V', y] or ['v', dy] - Length: 2 items

5. Cubic Bézier Curve (C / c)

Draws a cubic Bézier curve using two control points and an end point. - Syntax: ['C', x1, y1, x2, y2, x, y] or ['c', dx1, dy1, dx2, dy2, dx, dy] - Length: 7 items

6. Smooth Cubic Bézier Curve (S / s)

Draws a cubic Bézier curve where the first control point is a reflection of the previous command’s second control point. - Syntax: ['S', x2, y2, x, y] or ['s', dx2, dy2, dx, dy] - Length: 5 items

7. Quadratic Bézier Curve (Q / q)

Draws a quadratic Bézier curve using a single control point and an end point. - Syntax: ['Q', x1, y1, x, y] or ['q', dx1, dy1, dx, dy] - Length: 5 items

8. Smooth Quadratic Bézier Curve (T / t)

Draws a quadratic Bézier curve where the control point is a reflection of the previous command’s control point. - Syntax: ['T', x, y] or ['t', dx, dy] - Length: 3 items

9. Elliptical Arc (A / a)

Draws an elliptical arc segment based on radii, rotation, flags, and an end point. - Syntax: ['A', rx, ry, xAxisRotation, largeArcFlag, sweepFlag, x, y] or ['a', rx, ry, xAxisRotation, largeArcFlag, sweepFlag, dx, dy] - Parameters: - rx, ry (Number): Major and minor radii. - xAxisRotation (Number): Angle of the ellipse in degrees. - largeArcFlag (0 or 1): Determines if the arc drawn is greater than or less than 180 degrees. - sweepFlag (0 or 1): Determines the direction (positive or negative angle) the arc is drawn. - x, y (Number): End coordinates. - Length: 8 items

10. ClosePath (Z / z)

Closes the current sub-path by drawing a straight line back to the start of the current sub-path. - Syntax: ['Z'] or ['z'] - Length: 1 item

Example of a Complete Segment Token Array

Given the raw SVG path string d="M 10 20 L 30 40 A 5 5 0 0 1 50 60 Z", the normalized segment token array structure is:

[
  ['M', 10, 20],
  ['L', 30, 40],
  ['A', 5, 5, 0, 0, 1, 50, 60],
  ['Z']
]