<rect>

A rectangle defined by position (x, y), dimensions (width, height), and optional corner radius (rx, ry).

<circle>

A circle defined by center position (cx, cy) and radius (r).

<ellipse>

An ellipse defined by center (cx, cy) and two radii (rx, ry) for horizontal and vertical axes.

<line>

A line from point (x1, y1) to point (x2, y2). Lines have no fill, only stroke.

<polyline>

Connected line segments defined by a points attribute. Polylines are open (not auto-closed) and typically show stroke only.

Points format: pairs of x,y coordinates separated by spaces: x1,y1 x2,y2 x3,y3...

<polygon>

Like polyline but auto-closes, connecting the last point back to the first. Fill is visible since the shape is closed.

Points format: same as polyline — pairs of x,y coordinates: x1,y1 x2,y2 x3,y3...

<path>

The most powerful SVG element — draws complex shapes using the d attribute with path commands.

Commands: M move to, L line to, H horizontal, V vertical, C cubic bezier, S smooth cubic, Q quadratic bezier, T smooth quadratic, A arc, Z close path. Lowercase = relative coordinates.

Path: Lines (L, H, V)

L x,y draws a line to absolute coordinates. H x horizontal line, V y vertical line.

Path: Quadratic Bezier (Q)

Q cx,cy x,y draws a curve with one control point. The curve is pulled toward the control point.

Path: Smooth Quadratic (T)

T x,y continues a quadratic curve by reflecting the previous control point. Chain multiple T commands for smooth waves.

Path: Cubic Bezier (C)

C c1x,c1y c2x,c2y x,y draws a curve with two control points. The curve starts toward c1 and ends coming from c2.

Path: Smooth Cubic (S)

S c2x,c2y x,y continues a cubic curve by reflecting the previous c2 as the new c1. Creates smooth connections.

Path: Arc (A)

A rx ry rotation large-arc sweep x,y draws an elliptical arc. The flags select which of 4 possible arcs to draw.

Path: Close Path (Z)

Z closes the path by drawing a straight line back to the starting point. Creates closed shapes for filling.

<textPath>

Text that flows along a <path>. The startOffset controls where text begins on the path.

Transforms

The transform attribute can translate, rotate, and scale elements. Multiple transforms are combined.