How I built it
SVG is a resolution-independent, XML-based format. I planned a 200 × 200 viewBox from (0,0), then layered three shapes to make the Waterloo station logo.
- Ring:
<circle>, cx 100, cy 100, r 70. CSS sets fill none and a 20 stroke-width. - Bar:
<rect>, x 10, y 80, 180 × 40, so its centre is y 100. - Name:
<text>at x 100, y 100, centred withtext-anchoranddominant-baselinein CSS.
Layering follows the code order: ring, bar on top, text. All colour comes from CSS (fill, stroke, stroke-width), including the :hover and :focus-visible states.
Same SVG, new theme
The .custom-theme class changes the ring, bar and text colours. The geometry is the same.