Waterloo and City Line SVG

waterloo_and_city_line.svg

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="660" viewBox="0 0 1000 660" role="img" aria-labelledby="title desc">
  <title id="title">Topological map — Waterloo &amp; City line (Waterloo ↔ Bank)</title>
  <desc id="desc">Two stations: Waterloo (left) and Bank (right). Station names in London Underground map blue. British Rail double arrow logo closely aligned with the Waterloo label.</desc>

  <!-- Background -->
  <rect x="0" y="0" width="100%" height="100%" fill="#ffffff" />

  <defs>
    <style>
      .station-name {
        font-family: "Johnston", "Gill Sans", "Helvetica", "Arial", sans-serif;
        font-size: 27px;
        fill: #003688;
        dominant-baseline: middle;
      }
      .station-circle {
        fill: none;
        stroke: #000000;
        stroke-width: 6;
      }
      .line {
        stroke: #00A5A8;
        stroke-width: 6;
        stroke-linecap: butt;
      }
      .br-fill {
        fill: #E31C2B;
      }
    </style>
  </defs>

  <g id="map">
    <!-- line touches circle edges -->
    <line class="line" x1="224" y1="330" x2="776" y2="330" />

    <!-- Waterloo -->
    <g id="waterloo" transform="translate(200,330)">
      <!-- label group -->
      <g transform="translate(0,-60)">
        <text class="station-name" x="0" y="0" text-anchor="middle">Waterloo</text>

        <!-- British Rail double arrow (much closer + slightly higher) -->
        <svg x="66" y="-15" width="36" height="22" viewBox="0 0 80 50" aria-hidden="true" focusable="false">
          <g transform="translate(0,-247)">
            <path class="br-fill"
              d="m 71.666665,261.99972 1.43e-4,5.83338 H 54.583332 l -16.666668,8.3334 h 33.750144 l -1.43e-4,5.83338 H 37.916664 l 22.083456,9.16674 H 45.000089 L 25.416666,281.99997 H 8.3333499 V 276.1665 H 25.416666 l 16.666667,-8.3334 H 8.3333499 l -1.69e-5,-5.83317 33.75,-2.1e-4 -22.083293,-9.16674 h 15.00003 l 19.583262,9.16695 z"/>
          </g>
        </svg>
      </g>

      <circle class="station-circle" cx="0" cy="0" r="24" />
    </g>

    <!-- Bank -->
    <g id="bank" transform="translate(800,330)">
      <text class="station-name" x="0" y="-60" text-anchor="middle">Bank</text>
      <circle class="station-circle" cx="0" cy="0" r="24" />
    </g>
  </g>
</svg>