What Is an SVG?
Scalable Vector Graphics (SVG) are images described with maths instead of pixels. A raster image, like the cow photos on my raster page, is a fixed grid of coloured squares, so it goes blurry when it is enlarged. An SVG is written in XML markup as a list of shapes with coordinates, and the browser redraws those shapes at whatever size is needed. That means the same logo stays perfectly sharp in my small header and in the large version below.
Planning the Grid and the viewBox
Before writing any code I planned the roundel on a 300 by 300 grid, with the origin (0,0) at the top-left corner, x increasing to the right and y increasing downwards. This became the viewBox:
<svg viewBox="0 0 300 300">The viewBox sets up the internal coordinate system. CSS then decides how big the SVG actually appears on screen (110px wide in the header on desktop, up to 560px below). Because the viewBox is square and the width is set with height: auto, the logo always scales without stretching.
The Three Primitive Shapes
The whole roundel is built from just three basic shapes, layered in source order. Later elements are drawn on top of earlier ones, so the ring goes first, then the bar, then the text.
<circle class="roundel-ring" cx="150" cy="150" r="100"/>
<rect class="roundel-bar" x="10" y="125" width="280" height="50"/>
<text class="roundel-text" x="150" y="150"
text-anchor="middle" dominant-baseline="central">ANGEL</text>The ring (<circle>): the centre is at (150,150), the exact middle of the grid. The radius is 100. In CSS I give it a stroke-width of 30, and because a stroke is drawn half inside and half outside the path, the ring runs from radius 85 to radius 115. Its outer edge reaches 150 - 115 = 35 and 150 + 115 = 265, which leaves a margin inside the 300 unit canvas.
The bar (<rect>): I wanted a bar 50 units tall centred on y = 150, so its top edge is 150 - 25 = 125. It is 280 units wide starting at x = 10, so it ends at x = 290. That is wider than the ring (35 to 265), so the bar sticks out on both sides just like the real Underground sign.
The station name (<text>): the text is placed at the centre point (150,150). The attribute text-anchor="middle" centres it horizontally on that point and dominant-baseline="central" centres it vertically, so the name sits exactly in the middle of the bar.
Styling the SVG With CSS
None of the shapes have any colour in the HTML. There are no fill or stroke attributes in the markup at all. Each shape has a class, and my external stylesheet (/css/style.css) targets those classes:
.roundel-ring { fill: none; stroke: #DC241F; stroke-width: 30; }
.roundel-bar { fill: #0019A8; }
.roundel-text { fill: #FFFFFF; }This is the Hollow Ring Technique. Instead of drawing a solid red circle and covering the middle with a smaller circle, the circle has fill: none and only a thick stroke. That leaves the two half-moon areas above and below the bar completely transparent, so whatever is behind the SVG shows through. You can see this in the striped frame below.
Because the SVG is inline in the HTML, its shapes are part of the page, so I can also add interaction with pseudo-classes. When you hover over a logo, or tab to it with the keyboard (:focus-visible), the ring gets slightly darker and thicker. The change is small on purpose so it never makes the logo harder to read.
An Alternative Colour Theme
To show how powerful it is to keep presentation in CSS, the large roundel below uses exactly the same shapes as my header logo, but it has an extra class: custom-theme. My CSS has rules that only apply inside that class, and because they are more specific (two classes instead of one) they override the red, blue and white. I chose an autumn palette that matches the warm browns of my site: an amber ring, a dark brown bar and cream lettering in Georgia.
.custom-theme .roundel-ring { stroke: #D98E04; stroke-width: 26; }
.custom-theme .roundel-bar { fill: #2D211C; }
.custom-theme .roundel-text { fill: #FAF8F4; font-family: Georgia, serif; }