Topic 9 · 9 of 43

SVG Graphics

All in one: every SVG shape and attribute, side by side

What this example compares

Raster vs vector: a stretched PNG vs an SVG file in <img> vs inline <svg>
Size vs grid: width/height vs viewBox, with the 200-units-in-400-px exam case and a pixel ruler
Where a point lands: origin at the top-left, y growing down, a shape inside, on the edge and outside the viewBox
A box of another shape: preserveAspectRatio "xMidYMid meet" vs "xMidYMid slice" vs "none"
Closing a shape: <circle ... /> vs <circle></circle> vs not closed
By corner or by centre: <rect x y rx> vs <circle cx cy r> vs <ellipse rx ry>, and the wrong <circle x y>
Lines: <line> (with and without a stroke) vs <polyline> vs <polygon>, and the triangle
Paint: fill vs stroke vs both vs neither, and a colour as a name, a hex code and rgb()
Outline style: stroke-width vs stroke-dasharray
Line ends: stroke-linecap butt vs round vs square
See-through: opacity vs fill-opacity vs stroke-opacity
The path language: M L H V Z, uppercase vs lowercase, Q, C and A
Words: <text> on its baseline, text-anchor start vs middle vs end, font-size and <tspan>
Grouping: loose shapes vs <g transform="translate(50,20)"> vs <g fill>
Accessible SVG: role="img" + aria-label vs <title> vs aria-hidden="true" vs alt, which belongs only to <img>

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see fifteen panels. In panel 1 the stretched PNG dot is blurry while the campus drawing and the inline circle are sharp. Panel 2 shows one orange circle at three sizes and a 100-unit orange square that reaches the 200 px mark of the ruler. In panel 3 the green circle is whole, cut in half at the edge, and missing from the red box. Panel 4 shows the same square drawing fitted with side bands, cropped at the top and bottom, and stretched so the circle becomes an oval. In panel 5 the red card shows only the orange circle. Panel 6 shows the rectangle hanging from the red dot while the circle and ovals are centred on it, and the red card's circle stuck in the top-left corner. In panel 7 the red box is empty, the zigzag is open, and the same zigzag as a polygon is closed. Panels 8 to 11 show a disc, a ring, a rimmed disc, a black disc and two identical orange discs; three line thicknesses and dashes; the three line ends against orange marks; and the three kinds of fading over a navy half. Panel 12 shows two identical shapes, an open one, two lines that end in different places, and three curves. Panel 13 shows CSE326 starting at, centred on and ending at the red dot. Panel 14 shows the badge moved out of its dashed ring, and panel 15 shows four identical badges and the campus drawing. There is no script, so the Console stays empty.

Quick check: in panel 2, card 4, you change width="400" height="200" to width="600" height="300". How wide is the orange square now, and did its code change?

300 px, and no. The viewBox is still 200 units wide, now drawn in 600 px, so 1 unit = 3 px and the rect width="100" shows 300 px wide. Only the size on the page changed; the grid and the shape's numbers did not.