Understanding the SVG M Command and Subpaths

The M (moveto) command in an SVG path definition establishes a new current point, effectively starting a new geometric subpath without rendering a visible line. In an SVG <path> element’s d attribute, path data is organized into one or more subpaths. Understanding how the M command establishes coordinates, handles subsequent parameters, and isolates distinct shapes is essential for mastering complex SVG graphics, compound paths, and fill-rule behaviors.

In SVG path syntax, the M command (uppercase for absolute coordinates) or m command (lowercase for relative coordinates) sets the drawing cursor to a specified (x, y) coordinate. When the SVG rendering engine parses an M command, it resets the internal “current point” to the target coordinate. Because it does not generate a connecting stroke from the previous position, it acts as a “pen-up” instruction that creates an empty gap between distinct segments.

Every SVG path contains at least one subpath, and every subpath is initiated by an M or m command. When an M command appears midway through a d attribute string:

  1. Terminates the previous subpath: The renderer stops adding segments to the active subpath. If the previous subpath was not closed with a Z (closepath) command, it remains an open subpath.
  2. Initializes the new subpath: The renderer marks the designated (x, y) location as the starting point (initialPoint) of the new subpath and the active currentPoint.
  3. Resets the closepath target: Any subsequent Z or z command will now draw a straight line back to this specific M coordinate, rather than the start of any earlier subpath in the same element.

The M command also accepts multiple coordinate pairs. If more than one coordinate pair is supplied to an M command (for example, M 10 10 20 20 30 30), the SVG specification dictates that only the first pair initializes the subpath as a moveto. All subsequent coordinate pairs are automatically parsed as implicit L (lineto) or l (relative lineto) commands.

Initiating multiple subpaths with M commands within a single <path> element allows the creation of compound paths and hollow shapes. When combined with SVG fill rules such as nonzero or evenodd, distinct subpaths can define outer perimeters and inner cutouts (like the hole in a donut or the counter in a letter glyph), allowing complex multi-part geometry to be managed within a single DOM node.