What is SVG?
SVG stands for Scalable Vector Graphics. Unlike the raster images on my last page, it isn't a grid of pixels. It's written in XML, so the shapes are just math, and the browser draws them when the page loads. That means the logo can be scaled up or down and never gets pixelated, which is why it works well for logos.
Planning the Grid
Before writing any code I sketched the logo on a grid. I went with viewBox="0 0 200 120", so the grid is 200 wide and 120 tall, and (0,0) is the top-left corner. X gets bigger going right and Y gets bigger going down. The center of the logo is at (100,60), and everything is planned around that point.
The Shapes
The logo only uses 3 shapes. The ring is a circle with cx="100", cy="60" and r="45". The bar is a rect starting at x="10", y="45", with a width of 180 and a height of 30, so it's centered on y=60 and sticks out past the ring on both sides. The station name is a text element placed right at the center (100,60).
The order matters because SVG paints shapes in the order they're written. The circle goes first so it's at the bottom, then the bar is painted over it, and the text is last so it sits on top of the bar.
Styling with CSS
There are no colors in the HTML at all, all the styling is in my external stylesheet. The circle gets fill: none and a thick red stroke, so it's a hollow ring and the page background shows through the middle. The bar gets a blue fill, and the text is white, with text-anchor and dominant-baseline set to middle so it's centered in the bar. When you hover over the header logo (or tab to it), the ring gets a bit thicker.
The Big Version
This is the exact same SVG code as the header logo, but with the custom-theme class added. The CSS for that class swaps the colors for a Paddington Bear theme: a marmalade orange ring, a brown bar and yellow text.