Shapes and coordinates

The viewBox, the eight drawing primitives, paths as a mini language, and grouping with defs and use.

The coordinate system

<svg viewBox="0 0 200 100" width="400" height="200" role="img" aria-label="A rectangle">
  <rect x="10" y="10" width="180" height="80" />
</svg>

The viewBox establishes a user coordinate system of min-x min-y width height. Everything inside is drawn in those units; width and height are the final rendered box. Because the two are independent, the same drawing scales cleanly from a favicon to a poster without editing any shape.

Attribute	Meaning
`viewBox="0 0 200 100"`	User units from (0,0) spanning 200 by 100
`width` / `height`	Rendered size; bare numbers are CSS pixels
`preserveAspectRatio`	How the content fits the box; default `xMidYMid meet` keeps the ratio and centres it
`preserveAspectRatio="none"`	Stretches to fill — the trick behind fluid full-width line art
`xmlns`	Required only when the SVG is a standalone file, not when inlined in HTML

<!-- fluid: no fixed height, the viewBox supplies the ratio -->
<svg viewBox="0 0 600 300" style="width: 100%; height: auto;">
  <circle cx="300" cy="150" r="120" fill="none" stroke="#0ea5e9" stroke-width="4" />
</svg>

The drawing primitives

Element	Key attributes	Notes
`rect`	`x y width height rx ry`	The only shape with separate corner radii
`circle`	`cx cy r`	A square viewBox makes it easy to centre
`ellipse`	`cx cy rx ry`	Two radii instead of one
`line`	`x1 y1 x2 y2`	Needs a stroke; fill does nothing
`polyline`	`points`	Open shape, typically stroked
`polygon`	`points`	Same list, automatically closed
`path`	`d`	Everything else — arcs, curves, compound figures
`text` / `tspan`	`x y dx dy text-anchor`	Text does not wrap; each line is its own element

<svg viewBox="0 0 300 120" style="width: 100%; height: auto;">
  <rect x="10" y="10" width="80" height="60" rx="8" fill="#e0e7ff" stroke="#4f46e5" />
  <circle cx="140" cy="40" r="30" fill="#bae6fd" />
  <ellipse cx="230" cy="40" rx="40" ry="24" fill="#fde68a" />
  <polygon points="10,110 60,80 100,110" fill="#fca5a5" />
  <polyline points="120,110 150,85 180,105 215,80" fill="none"
            stroke="#0f766e" stroke-width="3" stroke-linejoin="round" />
</svg>

Paths and reuse

<!-- path commands: uppercase is absolute, lowercase is relative -->
<!-- M move, L line, H/V axis line, C cubic, S smooth cubic, Q quadratic, A arc, Z close -->
<svg viewBox="0 0 120 120">
  <path d="M10 100 C 10 20, 90 20, 90 100 Z" fill="#c7d2fe" />
  <path d="M20 60 A 40 40 0 0 1 100 60" fill="none" stroke="#1e293b" stroke-width="3" />
</svg>

<svg viewBox="0 0 100 100">
  <defs>
    <symbol id="star" viewBox="0 0 24 24">
      <path d="M12 2 l3 7 h7 l-6 5 2 8 -6-4 -6 4 2-8 -6-5 h7 z" />
    </symbol>
    <clipPath id="round"><circle cx="50" cy="50" r="40" /></clipPath>
  </defs>

  <use href="#star" x="0" y="0" width="40" height="40" fill="#f59e0b" />
  <use href="#star" x="50" y="50" width="40" height="40" fill="#f59e0b"
       clip-path="url(#round)" />
</svg>

defs holds anything referenced by id: gradients, filters, patterns, symbols, clip paths and masks.
use instances a symbol or shape by reference and can override presentation attributes on the instance.
g groups children so a single transform or opacity applies to all of them.
A path with hundreds of commands is normal output from a vector editor; optimise it with a tool rather than by hand.

💡

Coordinates are inherited, not absolute. A shape inside a g that is translated by (20, 10) has its own numbers interpreted in the translated system — the fastest way to move a whole illustration is to change one transform on its group.

FAQ

Do I need to set x and y on every shape?

Yes for rect and circle, since their origin is baked into their attributes. For paths and groups, wrap them in a g transform="translate(x y)" so the shape data can be translated once and reused.

Why does my SVG get cut off at the edges?

SVG clips to its viewport by default. Either enlarge the viewBox to include the overflowing shape, or set overflow: visible on the element — but remember the first approach is the one that scales.

Styling with CSS and paint servers Animation, embedding and accessibility

Last refreshed 2026-09-18.

Shapes and coordinates

The coordinate system

The drawing primitives

Paths and reuse

FAQ

Related