Vector Geometry: SVG Primitives, Path Syntax (<path d>), and Fill Rules

01SVG Geometric Primitives vs the Universal Path

SVG provides dedicated semantic primitive elements for common geometric forms: <rect> (rectangles and rounded cards), <circle> (circles with cx, cy, r), <ellipse>, <line> (straight lines with x1, y1, x2, y2), and <polygon> (multi-sided closed geometric shapes).

While primitives are readable and concise, the most powerful and versatile element in vector graphics is the <path> element.

Any two-dimensional shape—from simple triangles to complex anatomical illustrations and organic typography—can be expressed using a single <path> element via its d (data) attribute. The d attribute contains a sequence of drawing commands and coordinates read by the SVG rasterizer like a mechanical pen plotter.

<!-- Geometric Primitives and Complex Path Commands --><svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">    <!-- 1. Rounded Rectangle Primitive -->    <rect x="10" y="10" width="80" height="80" rx="10"           fill="#3b82f6" opacity="0.3"/>        <!-- 2. Circle Primitive -->    <circle cx="150" cy="50" r="40"             fill="#10b981" opacity="0.3"/>        <!-- 3. Complex Path: Smooth Cubic Bezier Curves -->    <!-- M: Move to (20,150) | C: Cubic Bezier (ctrl1, ctrl2, end) | Z: Close -->    <path d="M 20,150              C 60,100 100,200 140,150              S 180,120 190,150              L 190,190 L 20,190 Z"           fill="#6366f1"           stroke="#4338ca"           stroke-width="3"/></svg>

02Deconstructing Path Commands (M, L, C, A, Z)

Path commands come in two case variants: Uppercase letters specify ABSOLUTE coordinates on the canvas; lowercase letters specify RELATIVE coordinates offset from the current pen position.

1. M x y (Move To): Lifts the virtual pen and positions it at (x, y) without drawing a line.

2. L x y (Line To): Draws a straight vector line from the current position to (x, y). H x and V y draw horizontal and vertical lines respectively.

3. C x1 y1, x2 y2, x y (Cubic Bézier): Draws a smooth curve to (x, y) governed by two control points (x1, y1) and (x2, y2).

4. A rx ry x-axis-rotation large-arc-flag sweep-flag x y (Elliptical Arc): Draws circular or elliptical arcs (critical for pie charts and gauges).

5. Z (Close Path): Draws a straight line from the current position back to the origin of the current subpath.

03Determining Shape Interiors: fill-rule Mechanics

When vector paths intersect or contain nested cutouts (like the donut hole in the letter 'O'), the browser must determine which regions are 'inside' the shape to apply color fill.

1. fill-rule="nonzero" (Default): Uses a ray-casting winding rule. For any point, draw a ray to infinity and count path intersections taking direction into account. Non-zero counts are filled.

2. fill-rule="evenodd": Simply counts the number of path crossings. Odd counts are filled; even counts are treated as transparent holes, making it simple to create cutout masks.

04Path Command Reference Matrix

A summary of essential SVG path commands:

Mastering M, C, and Z commands allows authoring custom icons and dynamic data charts.

+-----------------------+---------------------+-----------------------------------------+| Command (Absolute)    | Parameters          | Geometric Action                        |+-----------------------+---------------------+-----------------------------------------+| M x,y                 | (x, y)              | Move pen to coordinates without drawing || L x,y                 | (x, y)              | Straight line to coordinates            || C x1,y1 x2,y2 x,y     | 2 controls + end    | Cubic Bézier smooth curve               || A rx,ry rot arc sw x,y| Radius, flags, end  | Elliptical circular arc                 || Z                     | None                | Close subpath back to origin            |+-----------------------+---------------------+-----------------------------------------+

05Production Standards & Real-World Engineering Trade-Offs

Modern digital experiences demand high-fidelity visual assets delivered with minimal bandwidth consumption. In responsive web design, serving desktop-sized raster images to mobile devices wastes megabytes of user cellular data and triggers memory pressure on low-power devices. Leveraging the picture element and srcset attributes ensures that the browser requests only the exact resolution matching the viewport and device pixel ratio.

Furthermore, scalable vector graphics (SVG) provide mathematically resolution-independent visuals with near-zero byte footprints. When embedded inline within HTML documents, SVGs become fully scriptable and styleable via CSS, allowing developers to craft dynamic micro-animations, interactive vector dashboards, and theme-adaptive brand assets without additional network requests.