Vector Graphics: The Camden Town Roundel

From Pixels to Paths

My last assignment used raster images, which are grids of pixels. Scale one up and the pixels just get bigger, so it turns soft and blocky. An SVG (Scalable Vector Graphic) works differently: it is XML code that describes shapes with numbers, and the browser draws them fresh at any size. That is why one piece of code can be a small logo in my header and a big display on this page without losing any sharpness.

Setting Up the Grid

The London Underground roundel is wider than it is tall, because the name bar sticks out past the ring. So instead of a square canvas I planned it on a 400 by 320 grid. The point (0,0) is the top-left corner, x counts to the right and y counts down.

<svg viewBox="0 0 400 320">

The viewBox is the drawing's own coordinate system. It never changes; CSS decides how big it shows up (about 100 to 130 pixels wide in the header, up to 600 pixels below). Because only the width is set and the height is auto, the 400:320 shape is always kept.

Three Shapes, Stacked

The whole logo is one circle, one rectangle and one line of text. SVG paints in the order the code is written, so the ring is drawn first, the bar covers it, and the name sits on top of the bar.

<circle class="roundel-ring" cx="200" cy="160" r="110"/>
<rect class="roundel-bar" x="20" y="132"
      width="360" height="56"/>
<text class="roundel-name" x="200" y="160"
      text-anchor="middle"
      dominant-baseline="central">CAMDEN TOWN</text>

Ring: the middle of a 400 by 320 grid is (200,160), so that is the centre. The radius is 110 and the stroke is 34 wide. A stroke sits half inside and half outside its path, so the ring runs from 110 - 17 = 93 to 110 + 17 = 127 from the centre. The top of the ring lands at y = 33 and the bottom at y = 287, leaving space inside the 320 height.

Bar: I made it 56 tall and centred it on y = 160, so the top edge is 160 - 28 = 132. It is 360 wide starting at x = 20, so it finishes at x = 380. The ring only reaches from x = 73 to x = 327, so the bar overhangs by 53 on each side, like the real signs.

Name: the text is placed at (200,160). text-anchor="middle" centres it left to right on that point, and dominant-baseline="central" centres it top to bottom, so it sits in the exact middle of the bar.

Colour Comes From CSS

There are no fill or stroke attributes in my HTML at all. Every shape just has a class, and the stylesheet paints it:

.roundel-ring { fill: none; stroke: #DC241F; stroke-width: 34; }
.roundel-bar  { fill: #0019A8; }
.roundel-name { fill: #FFFFFF; }

Giving the circle fill: none and a thick stroke is the hollow ring technique. Nothing is painted inside the ring, so the two half-circles above and below the bar are see-through. In my header you can see the dark green background through them, and below you can see the dot pattern.

Because the SVG is written straight into the page, CSS can also react to the user. Hovering over the header logo, or tabbing to it with the keyboard, thickens the ring from 34 to 40 and lightens the bar a little. It is a small change so the name always stays readable.

Northern Line at Night

Camden Town is on the Northern line, which is black on the Tube map, so I based my alternative theme on that. The large roundel has an extra class, northern-theme. Rules like .northern-theme .roundel-ring use two classes, which makes them more specific than the normal one-class rules, so they win. Every part changes: a mint green ring from my site palette, a black bar, and the name in gold using my heading font.

.northern-theme .roundel-ring { stroke: #95D5B2; }
.northern-theme .roundel-bar  { fill: #000000; }
.northern-theme .roundel-name { fill: #F2C14E; }