Module 1 — Foundations

Every SVG you will ever write runs on three ideas: a coordinate grid, a viewport, and paint. Master those and everything else is vocabulary.

playground · coordinates

Code

Preview

Live · 150ms debounce

1. The coordinate grid

An <svg> is a two-dimensional grid. The origin (0,0) is the top-left corner. x grows right, y grows down — the opposite of the math you learned in school, and the same as screen rendering.

Principle: coordinates are pixels in the SVG's own space. What those pixels mean on screen is decided by viewBox.

Try it. The playground above draws a circle at (60, 50) with radius 40. Move the numbers and watch the circle move:

2. viewBox — the camera

viewBox="min-x min-y width height" declares which part of your coordinate space is shown. The SVG then scales that space to fit whatever size the element renders at. Same artwork, different camera.

Principle: width/height set the element size; viewBox sets the scene. Change the viewBox numbers below and the camera zooms and re-frames.

playground · viewBox

Code

Preview

Live · 150ms debounce

3. The five basic shapes

Almost everything you will build starts from five primitives.

<rect x="10" y="10" width="80" height="50" />        <!-- rectangle (add rx for rounded corners) -->
<circle cx="50" cy="50" r="40" />                    <!-- circle: center x, center y, radius -->
<ellipse cx="50" cy="50" rx="40" ry="20" />          <!-- ellipse: two radii -->
<line x1="0" y1="0" x2="100" y2="100" />             <!-- line: two endpoints -->
<polyline points="0,0 50,30 100,0 150,50" />         <!-- connected line segments -->
<polygon points="50,0 100,90 0,90" />                <!-- closed shape -->

Principle: shapes take center/radius or corner/width/height — never guess: read the attribute names, they say what they mean.

4. Fill and stroke — the paint

fill paints the inside. stroke paints the outline; stroke-width its thickness. Both accept any CSS color:

playground · fill & stroke

Code

Preview

Live · 150ms debounce

Challenge: draw a house

Using only <rect>, <polygon>, and <line>, draw a house: a square body, a triangular roof, a door, and a window. Keep the viewBox 0 0 200 200.

Solution

<svg viewBox="0 0 200 200" width="100%">
  <rect x="40" y="80" width="120" height="90" fill="#e6f4fe" stroke="#0d74ce" stroke-width="2"/>
  <polygon points="30,80 100,20 170,80" fill="#0090ff"/>
  <rect x="75" y="120" width="50" height="50" fill="#12b594"/>
  <rect x="55" y="95" width="26" height="26" fill="#ffffff" stroke="#0d74ce"/>
</svg>

Grounded in: MDN SVG Tutorial · Joni Trythall's Pocket Guide to Writing SVG (MIT) · SVG Tutorial. All sources free/open.