Basic shapes

The six shapes

SVG provides six built-in primitive elements that cover the vast majority of geometric drawing needs. Everything else — complex icons, charts, illustrations — is ultimately composed from these six plus the <path> element (covered next). Start here and the rest of SVG will make sense.

All coordinates are in the SVG's internal coordinate system defined by viewBox. When you write x="10", you mean 10 units in that coordinate space — not pixels. The browser maps those units to actual screen pixels when it renders the SVG at a given display size.

<rect> — rectangles and squares

The <rect> element draws a rectangle. Its four required attributes are x and y (the top-left corner) plus width and height. Add rx and ry to round the corners — a single rx value rounds all four corners equally, like CSS border-radius.

<circle> — circles

A circle is defined by its center point (cx, cy) and its radius (r). The center is the anchor — resizing r grows the circle outward in all directions from that fixed point.

<ellipse> — ellipses

An ellipse is like a circle but with separate horizontal and vertical radii: rx controls the width and ry controls the height. The center is still specified with cx and cy. When rx === ry, an ellipse is identical to a circle.

<line> — straight lines

A line connects two points: (x1, y1) to (x2, y2). Lines have no fill area, so a fill attribute has no effect. A line is invisible unless you give it a stroke — without a stroke color and a non-zero stroke-width, the browser draws nothing.

<polyline> — connected line segments

A <polyline> is a series of connected straight line segments. The points attribute is a space- (or comma-) separated list of x,y coordinate pairs. Like <line>, it must have a stroke to be visible. Polylines have a fill area — the space between the first point, the last point, and the line segments. Setting fill="none" gives you a pure multi-segment line.

<polygon> — closed shapes

A <polygon> works exactly like <polyline> but the browser automatically draws a closing segment from the last point back to the first, forming a closed shape. This makes it ideal for triangles, pentagons, hexagons, and any other regular or irregular closed polygon.

All six shapes at a glance

Here is a quick reference gallery showing all six primitive shapes side by side:

Fill & stroke

Every SVG shape has two paint layers: the fill (the interior color) and the stroke (the painted border). Both default to their SVG initial values: fill defaults to black, and stroke defaults to none. You override these with presentation attributes directly on the element, or with CSS — they are interchangeable.

Basic fill and stroke attributes

• fill — interior color. Any CSS color value works: named colors, hex, rgb(), oklch(), none.
• fill-opacity — 0 (fully transparent) to 1 (fully opaque), independent of the stroke.
• stroke — outline color. Must be set to something other than none for the outline to appear.
• stroke-width — thickness of the stroke in viewBox units. Strokes are centered on the shape's edge, so half the width falls inside, half outside.
• opacity — applies to the whole element (fill + stroke together).

Stroke appearance: linecap, linejoin, and dasharray

Three additional attributes let you control exactly how strokes look at their ends and corners:

• stroke-linecap — shape of the stroke ends for open paths and lines. Options: butt (default, flat at endpoint), round (semicircle beyond endpoint), square (like butt but extended by half the stroke width).
• stroke-linejoin — shape of corners where two segments meet. Options: miter (default, sharp point), round (rounded corner), bevel (cut corner).
• stroke-dasharray — a list of dash and gap lengths that creates a dashed or dotted stroke pattern. A single value like 8 creates equal dashes and gaps; two values like 12 4 make 12-unit dashes with 4-unit gaps.

Semi-transparent overlapping shapes

Using fill-opacity or opacity on overlapping shapes lets you create layered effects. Note the difference: fill-opacity only makes the fill transparent — the stroke remains fully opaque. Setting opacity on the element affects both fill and stroke together.