Phase 1Beginner2 of 19 in Data Visualization

SVG from Zero

Learn SVG, the browser's vector drawing language: coordinates, shapes, paths, viewBox, text, groups and reuse, then give the Lumen dashboard a frame that scales.

Every chart in this course is SVG underneath: rectangles for bars, circles for dots, paths for lines. This phase teaches SVG itself, from the first number to the last attribute, before any data arrives. Once you can read and write SVG, a chart library stops being magic.

You learn where a shape lands (the coordinate system), the six basic shapes, the pen commands of a path, how viewBox makes a drawing scale to any screen, how to style and label with text, and how to group, reuse and clip. Each topic also shows what goes wrong: shapes that vanish without an error, a squashed picture, a path the browser refuses.

At the end you rebuild the dashboard's frame in SVG: a header with a bike icon made of paths, three titled boxes, and the week chart in a viewBox so it scales from a phone to a wall screen. That fixes the sideways scrolling Phase 0 left behind.

Phase 1 · the story

Priya, operations lead

“I look at this on my phone in the depot and on the wall screen in the control room, and I want the icons and the frame to look sharp on both.”

Priya runs operations at Lumen Bikes. She keeps the dashboard open on her phone while she walks the depot, and on the big wall screen in the control room. After Phase 0 she opened the first page on both. On the wall screen the week chart is a small postage stamp in a large box. On her phone the chart box scrolls sideways.

"It's the same picture, so it should fit. And the little icons I want for the stations: if I zoom in they must not turn into blocks." Both problems have the same root: the first chart has a fixed pixel size, and it is not yet a drawing that knows how to scale.

SVG draws with shapes, not with pixels, so a drawing can be as sharp on a wall as on a phone. In this phase you learn how, and by the end the dashboard has a proper frame, a bike icon in the header, and a week chart that stretches to fit any box.

In this phase

You will learn

Read and write SVG: know exactly where a shape lands, and why it sometimes does not appear
Draw shapes and paths, and read the d attribute that every line chart is made of
Make a drawing scale to any screen with viewBox, without squashing it
Style, label, group and reuse shapes, and clip them

You write code in

In the editor on this page, and in your own lumen-dashboard/index.html (no install needed)

Files you touch

index.html

0/7 · 0%

7 topics ~3 h 17 code blocks & diagrams

Start with the first topic

1.1

The SVG Coordinate System

SVG places every shape with numbers measured from the top-left corner: x grows to the right and y grows downwards. Anything outside the SVG's width and height is clipped, silently, and an SVG with no size is 300 by 150.

24 min 2 code practice

1.2

Basic Shapes

SVG has six basic shapes: rect, circle, ellipse, line, polyline and polygon. Each needs a few attributes; a missing one counts as 0 and usually draws nothing, a negative size is an error, and later shapes paint over earlier ones.

23 min 2 code practice

1.3

Paths: the Pen Commands

A path is a shape drawn by pen commands written in one d string: move, line, curve, arc, close. Every line chart is one path, and a bad number in the string stops the drawing at that point with a console error.

30 min 4 code practice

1.4

viewBox and preserveAspectRatio

The viewBox attribute gives an SVG its own coordinate window, so the drawing scales to whatever size the screen gives it. preserveAspectRatio decides what happens when window and screen have different shapes: fit, fill, or stretch.

27 min 4 code practice

1.5

Styling SVG and Text

SVG shapes are coloured with fill (inside) and stroke (outline), set either as attributes or in CSS, where CSS wins. Text is placed by its baseline and anchor, never wraps, and overflows silently when a label is too long.

26 min 2 code practice

1.6

Groups, Transforms, Defs and Clipping

A <g> groups shapes so they move and style together. <defs>, <use> and <symbol> define a drawing once and reuse it. Gradients and patterns fill shapes, and clip paths and masks cut them, while the hidden parts stay in the page.

26 min 2 code practice

1.7

Build: The Dashboard Frame in SVG

Rebuild the dashboard frame so it fits any screen: a header with a bike icon made of paths, three titled boxes, and the week chart in a viewBox that scales from a phone to a wall screen. It answers Priya's request for a sharp, fitting dashboard.

24 min 1 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

Make room for a circle

This SVG has no size, so it is 300 by 150 and the circle at x = 320 is cut off.

Beginner

A pill, a dot and a triangle

Add three shapes inside the SVG: a rect with id pill (x 10, y 10, 100 wide, 40 tall, fully rounded ends), a circle with id dot (centre 160, 30, radius 20) and a polygon with id tri (points 220,50 250,10 280,50).

Beginner