SVG Path Syntax & Vector Geometry Glossary (40+ Terms)
The <path d="..."> element is the foundational primitive of all SVG vector icons. This glossary provides rigorous mathematical definitions, syntax references, and practical diagrams for every SVG path command and 2D vector coordinate concept.
- Comprehensive coverage of line commands, Bézier curves, elliptical arcs, and subpath closures.
- Clear explanations of matrix transformations, coordinate spaces, and winding order fill rules.
- Explore and inspect clean vector paths for 134,701 icons on IconStash.
1. Primary Path Commands (M, L, H, V, Z)
MoveTo M x,y / m dx,dy
Establishes a new current point for the drawing cursor without creating a visible line. Uppercase M uses absolute coordinates; lowercase m uses relative coordinates offset from the preceding coordinate.
LineTo L x,y / l dx,dy
Draws a straight line from the current position to the specified (x, y) coordinates.
Horizontal LineTo H x / h dx
Optimized shorthand that draws a strictly horizontal line to the target x-coordinate, maintaining the current y-coordinate.
Vertical LineTo V y / v dy
Optimized shorthand that draws a strictly vertical line to the target y-coordinate, maintaining the current x-coordinate.
ClosePath Z / z
Closes the active subpath by connecting a straight segment from the current coordinate back to the initial MoveTo point of that subpath.
2. Bézier Curve Commands (C, S, Q, T)
Cubic Bézier Curve C x1,y1 x2,y2 x,y
Draws a smooth cubic curve defined by two control points (x1, y1 for the start tangent, and x2, y2 for the end tangent) terminating at (x, y).
Smooth Cubic Bézier S x2,y2 x,y
Draws a cubic curve where the first control point is automatically calculated as the reflection of the previous curve's second control point, guaranteeing continuous tangent velocity.
Quadratic Bézier Curve Q x1,y1 x,y
Draws a quadratic curve controlled by a single control point (x1, y1) pulling the curve towards it before ending at (x, y).
Smooth Quadratic Bézier T x,y
Draws a quadratic curve that mirrors the preceding control point, creating seamless waving paths with minimal data.
3. Elliptical Arc Command (A)
Elliptical Arc A rx,ry x-rot large-arc sweep x,y
Draws an arc from the current point to (x, y) along an ellipse with horizontal radius rx and vertical radius ry. The x-rot parameter rotates the ellipse axes in degrees. The two boolean flags (large-arc-flag and sweep-flag) determine which of the four possible arc segments is drawn.
4. Coordinate Systems & ViewBox Math
viewBox min-x min-y width height
Defines the internal coordinate grid of the SVG canvas, enabling resolution-independent scaling to any external container dimensions.
preserveAspectRatio
Dictates whether an SVG maintains its uniform aspect ratio (e.g. xMidYMid meet) or stretches non-uniformly (none) when the viewport dimensions mismatch.
Current Transformation Matrix (CTM)
The 3x3 affine mathematical matrix mapping user-space vector points to screen pixels during browser GPU rendering.
5. Vector Geometry & Rendering Rules
Winding Order (Fill Rules)
The algorithmic rule determining whether enclosed vector regions are filled or transparent. nonzero counts clockwise vs counter-clockwise crossings; evenodd counts raw line intersections regardless of direction.
strokeDasharray & strokeDashoffset
Properties controlling dashed line patterns and stroke offset, used extensively in SVG line-drawing animations.
Subpath
An isolated sequence of drawing commands beginning with a MoveTo (M) command and terminating with either a ClosePath (Z) or a subsequent MoveTo command.
Frequently Asked Questions
Why do icon libraries minify SVG path commands?
Minifiers like SVGO remove unnecessary whitespace, convert absolute coordinates to relative numbers when shorter, and merge consecutive commands (e.g. L 10 10 L 20 20 ➔ L10 10 20 20) to reduce network payload size.
Explore and copy clean, optimized SVG paths across 134,701 vector icons at IconStash.