BSicon/Icon geometry and SVG code neatness

From Wikimedia Commons, the free media repository
Jump to: navigation, search

Code layout[edit]

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
  <title>Title (optional)</title>

  Coding of the elements

</svg>

Basic geometry[edit]

Standard icons are drawn in a 500 pixel × 500 pixel square. Lines are 100 pixels wide, centred at 250 pixels. Parallel lines are centred on the quarter points, i.e. 125 and 375 pixels, as are formation elements. Thin lines (sidings, feeders, formation elements, linkways, borders, etc.) are 50 pixels wide, and also aligned to the ¼–½–¾ grid. Unnavigable waterways are 75 pixels wide, and have their own unique geometry.

Deriving new icons[edit]

In the tables below, each element is listed in only a single modification, without any possible transformations (rotation, flipping, combination etc.). To get the necessary modification, one of the following operations may be employed:

  •    — Flipping the image vertically: "reverse" all y-coordinates, i. e. subtract them from 500: 125 → 375 ; 35.4 → 464.6 ; -35.4 → 535.4 ; 0 → 500; 250 → 250 etc.
  •    — Flipping the image horizontally: "reverse" all x-coordinates, i. e. subtract them from 500 (for full-width icons), 250 (for half-width icons), 125 (for quarter-width icons) etc.
  •    — Flipping the image along the diagonal from the top left corner (4th) to the bottom right corner (2nd): swap x-coordinates with y-coordinates (and replace H operators with V operators, and vice versa): M 125,0 V 500M 0,125 H 500
  •    — Transpose the element horizontally, vertically or diagonally: add or subtract the needed amount from respective coordinates.
    For example, to calculate that elevated sidings in 1st corner  : (the middle of) a siding is 125px from (the middle of) a line, so if the line runs at 45° in the 1st corner (500, 0), the siding is 125px from it diagonally, or 125 / 2 ≈ 88.4px from it along the x-axis, and as much along the y-axis, i. e. M 411.6, 88.4. That gives the midpoint; the line should be drawn between two points that fall outside the icon borders, which can be calculated by adding or subtracting a sufficient value, e. g. 200px: M 211.6, -111.6 L 611.6, 288.4.
  • Note that for elliptical arcs (A), the first two values are not coordinates but the radii (horizontal and vertical; or two equal values for circles), and should not be modified in the above cases. However, the fifth value – either "0" (for a counter-clockwise / left-turning arc) or "1" (clockwise / right-turning arc) – should be reversed if the image is flipped, or if the order of the arc points is reversed.

Lines[edit]

Straight[edit]

BSicon STR.svg BSicon tSTR.svg Line through
BSicon STR.svg <path d="M 250,0 V 500" stroke-width="100" stroke="#BE2D2C"/>
BSicon tSTR.svg <path d="M 220,525 V 0 m 60,525 V 0" stroke-width="40" stroke="#BE2D2C" stroke-dasharray="50"/>
BSicon vSTR-.svg BSicon tvSTR-.svg Right parallel line
BSicon vSTR-.svg <path d="M 125,0 V 500" stroke-width="100" stroke="#BE2D2C"/>
BSicon tvSTR-.svg <path d="M 95,525 V 0 m 60,525 V 0" stroke-width="40" stroke="#BE2D2C" stroke-dasharray="50"/>
BSicon STR2+4.svg BSicon tSTR2+4.svg Line to corner 2 from corner 4
BSicon STR2+4.svg <path d="M 0,0 V 500,500" stroke-width="100" stroke="#BE2D2C"/>
BSicon tSTR2+4.svg <path d="M 503.5,461 39,-3.5 M 461,503.5 -3.5,39" stroke-width="40" stroke="#BE2D2C" stroke-dasharray="50,51.15"/>

Interrupted lines[edit]

BSicon LSTR.svg BSicon tLSTR.svg Line through
BSicon LSTR.svg <path d="M 250,0 V 501" stroke="#BE2D2C" stroke-width="100" stroke-linecap="round" stroke-dasharray="0,125"/>
BSicon tLSTR.svg <path d="M 220,-9.3 V 500 m 60,9.3 V 0" stroke="#BE2D2C" stroke-width="40" stroke-linecap="round" stroke-dasharray="18.6,148"/>
BSicon LLSTR2+4.svg Line to 2nd corner from 4th
BSicon LLSTR2+4.svg <path d="M 0,0 500,500" stroke-width="100" stroke="#BE2D2C" stroke-linecap="round" stroke-dasharray="0,141.42"/>
BSicon LLSTR2+4e.svg Line to regular position at corner 2 from corner 4
BSicon LLSTR2+4e.svg <path d="M 0,0 500,500" stroke-width="100" stroke="#BE2D2C" stroke-linecap="round" stroke-dasharray="0,131.44"/>
BSicon LSTR2+4.svg Line between regular positions at corners 2 and 4
BSicon LSTR2+4.svg <path d="M 35.3,35.3 500,500" stroke-width="100" stroke="#BE2D2C" stroke-linecap="round" stroke-dasharray="0,121.46"/>

Turns and curves[edit]

BSicon STRrf.svg BSicon tSTRrf.svg Turn to right
BSicon STRrf.svg <circle cx="0" cy="0" r="250" stroke-width="100" stroke="#BE2D2C" fill="none"/>
(Alternatively:)
<path d="M 250,0 A 250 250 0 0 1 0,250" stroke-width="100" stroke="#BE2D2C" fill="none"/>
BSicon tSTRrf.svg <g stroke-width="40" stroke="#BE2D2C" fill="none">
 <circle cx="0" cy="0" r="220" stroke-dasharray="43.2" stroke-dashoffset="21.6"/>
 <circle cx="0" cy="0" r="280" stroke-dasharray="54.98" stroke-dashoffset="27.5"/>
</g>
BSicon vSTRrg-.svg BSicon tvSTRrg-.svg Right parallel line to upper right
BSicon vSTRrg-.svg <circle cx="0" cy="0" r="125" stroke-width="100" stroke="#BE2D2C" fill="none"/>
BSicon tvSTRrg-.svg <g stroke-width="40" stroke="#BE2D2C" fill="none">
 <circle cx="0" cy="0" r="95" stroke-dasharray="37.31" stroke-dashoffset="18.65"/>
 <circle cx="0" cy="0" r="155" stroke-dasharray="60.87" stroke-dashoffset="30.43"/>
</g>
BSicon v-STRrf.svg BSicon tv-STRrf.svg Left parallel line to lower right
BSicon v-STRrf.svg <circle cx="0" cy="0" r="375" stroke-width="100" stroke="#BE2D2C" fill="none"/>
BSicon tv-STRrf.svg <g stroke-width="40" stroke="#BE2D2C" fill="none">
 <circle cx="0" cy="0" r="345" stroke-dasharray="45.16" stroke-dashoffset="22.58"/>
 <circle cx="0" cy="0" r="405" stroke-dasharray="53.01" stroke-dashoffset="26.51"/>
</g>
BSicon STR+4.svg BSicon tSTR+4.svg Line from corner 4
BSicon STR+4.svg <path d="M 0,0 73,73 A 604 604 0 0 1 250,500" stroke-width="100" stroke="#BE2D2C" fill="none"/>
BSicon tSTR+4.svg <defs>
 <mask id="mask">
  <rect x="-100" y="-100" width="1200" height="1200" fill="white"/>
  <path d="M 0,0 73,73 A 604 604 0 0 1 250,500" stroke-width="20" fill="none" stroke="black"/>
 </mask>
</defs>
<g fill="none" stroke="#BE2D2C" stroke-width="100" mask="url(#mask)">
 <path d="M 500,0 M 250,525 V 500 A 604 604 0 0 0 73,73 L 0,0" stroke-dasharray="50,55.5"/>
</g>
BSicon vSTR+4-.svg BSicon tvSTR+4-.svg Right parallel line from corner 4
BSicon vSTR+4-.svg <path d="M 0,0 36.6,36.6 A 301.78,301.78 0 0 1 125,250 V 500" stroke-width="100" stroke="#BE2D2C" fill="none"/>
BSicon tvSTR+4-.svg <defs>
 <mask id="mask">
  <rect x="-100" y="-100" width="1200" height="1200" fill="white"/>
  <path d="M 125,525 V 250 A 301.78,301.78 0 0 0 36.6,36.6 L 0,0" stroke-width="20" fill="none" stroke="black"/>
 </mask>
</defs>
<g fill="none" stroke="#BE2D2C" stroke-width="100" mask="url(#mask)">
 <path d="M 250,0 M 125,525 V 250 A 301.78,301.78 0 0 0 36.6,36.6 L 0,0" stroke-dasharray="50,47.8"/>
</g>
BSicon v-STR+4.svg BSicon tv-STR+4.svg Left parallel line from corner 4
BSicon v-STR+4.svg <path d="M 0,0 286.6,286.6 A 301.78,301.78 0 0 1 375,500" stroke-width="100" stroke="#BE2D2C" fill="none"/>
BSicon tv-STR+4.svg <defs>
 <mask id="mask">
  <rect x="-100" y="-100" width="1200" height="1200" fill="white"/>
  <path d="M 375,500 A 301.78,301.78 0 0 0 286.6,286.6 L 0,0" stroke-width="20" fill="none" stroke="black"/>
 </mask>
</defs>
<g fill="none" stroke="#BE2D2C" stroke-width="100" mask="url(#mask)">
 <path d="M 500,0 M 375,525 V 500 A 301.78,301.78 0 0 0 286.6,286.6 L 0,0" stroke-dasharray="50,48.8"/>
</g>
BSicon STRc4.svg BSicon tSTRc4.svg Corner 4 for line at 45°
BSicon STRc4.svg <path d="M -50,50 50,-50" stroke-width="100" stroke="#BE2D2C"/>
BSicon tSTRc4.svg <path d="M 74.2,-31.8 -31.8,74.2" stroke="#BE2D2C" stroke-dasharray="50" stroke-width="40"/>
Interrupted lines[edit]
BSicon LSTRrf.svg BSicon tLSTRrf.svg Line to right
BSicon LSTRrf.svg <path d="M 250,0 A 250,250 0 0 1 0,250 H -1" stroke="#BE2D2C" stroke-width="100" stroke-linecap="round" stroke-dasharray=".01,124.99"/>
BSicon tLSTRrf.svg <g stroke="#BE2D2C" stroke-width="40" fill="none" stroke-linecap="round">
 <path d="M 220,-11.8 A 220,220 0 0 1 0,220" stroke-dasharray="23.6,149.2"/>
 <path d="M 280,-15 A 280,280 0 0 1 0,280" stroke-dasharray="30,189.9"/>
</g>
BSicon LSTR+4.svg BSicon tLSTR+4.svg Line from regular position at corner 4
BSicon LSTR+4.svg <path d="M 35.3,35.3 73,73 A 604 604 0 0 1 250,500 v 1" stroke-width="100" stroke="#BE2D2C" fill="none" stroke-linecap="round" stroke-dasharray="0,131.9"/>
BSicon tLSTR+4.svg <g stroke="#BE2D2C" stroke-width="40" fill="none" stroke-linecap="round">
 <path d="M 220,509.3 V 500 C 220,250 90,132.4 0,42.4 L -42.4,0" stroke-dasharray="18.6,148.5"/>
 <path d="M 280,510.3 V 500 C 280,250 155.4,113 42.4,0 L 0,-42.4" stroke-dasharray="20.6,161.5"/>
</g>
BSicon dLSTR+4.svg Right parallel line from regular position at corner 4
BSicon dLSTR+4.svg <path d="M 35.3,35.3 C 125,125 125,250 125,500" stroke="#BE2D2C" stroke-width="100" fill="none" stroke-linecap="round" stroke-dasharray=".01,121.3"/>

Multiple-column turns[edit]

BSicon kSTRgr.svg BSicon tkSTRgr.svg Turn to right (start)
BSicon kSTRgr.svg <path d="M 250,0 V 15 A 735 735 0 0 1 35,535" stroke-width="100" stroke="#BE2D2C" fill="none"/>
BSicon tkSTRgr.svg <defs>
 <mask id="mask">
  <rect x="-100" y="-100" width="1200" height="1200" fill="white"/>
  <path d="M 250,0 V 15 A 735 735 0 0 1 35,535" stroke-width="20" fill="none" stroke="black"/>
 </mask>
</defs>
<g mask="url(#mask)" stroke-width="100" stroke="#BE2D2C" fill="none">
 <path d="M 250,-25 V 15 A 735 735 0 0 1 -485,750" stroke-dasharray="50,48.76"/>
</g>
BSicon kABZc4.svg BSicon tkABZc4.svg Turn to right (corner)
BSicon kABZc4.svg <circle cx="-485" cy="-485" r="735" stroke-width="100" stroke="#BE2D2C" fill="none"/>
BSicon tkABZc4.svg <g stroke-width="40" stroke="#BE2D2C" fill="none">
 <circle cx="-485" cy="-485" r="705" stroke-dasharray="46" stroke-dashoffset="22"/>
 <circle cx="-485" cy="-485" r="765" stroke-dasharray="50" stroke-dashoffset="25"/>
</g>
BSicon kSTRqr.svg BSicon tkSTRqr.svg Turn to right (end)
BSicon kSTRqr.svg <path d="M 0,250 H 15 A 735 735 0 0 0 535,35" stroke-width="100" stroke="#BE2D2C" fill="none"/>
BSicon tkSTRqr.svg <defs>
 <mask id="mask">
  <rect x="-100" y="-100" width="1200" height="1200" fill="white"/>
  <path d="M 0,250 H 15 A 735 735 0 0 0 535,35" stroke-width="20" fill="none" stroke="black"/>
 </mask>
</defs>
<g mask="url(#mask)" stroke-width="100" stroke="#BE2D2C" fill="none">
 <path d="M -25,250 H 15 A 735 735 0 0 0 750,-485" stroke-dasharray="50,48.76"/>
</g>
BSicon 3STRgr.svg BSicon t3STRgr.svg 3-column (end)
BSicon 3STRgr.svg <path d="M -750,0 A 500 450 1 0 0 250,0" stroke-width="100" stroke="#BE2D2C" fill="none"/>
BSicon t3STRgr.svg <defs>
 <mask id="mask">
  <rect x="-100" y="-100" width="1200" height="1200" fill="white"/>
  <path d="M 250,0 A 500,450 0 0 1 -750,0" stroke-width="20" fill="none" stroke="black"/>
 </mask>
</defs>
<g fill="none" stroke="#BE2D2C" stroke-width="100" mask="url(#mask)">
 <path d="M 250,-25 V 0 A 500,450 0 0 1 -750,0" stroke-dasharray="50,56.67"/>
</g>
BSicon -3STRq.svg BSicon t-3STRq.svg 3-column (middle)
BSicon -3STRq.svg <path d="M -250,0 A 500 450 0 0 0 750,0" stroke-width="100" stroke="#BE2D2C" fill="none"/>
BSicon t-3STRq.svg <defs>
 <mask id="mask">
  <rect x="-100" y="-100" width="1200" height="1200" fill="white"/>
  <path d="M -250,0 A 500,450 0 0 0 750,0" stroke-width="20" fill="none" stroke="black"/>
 </mask>
</defs>
<g fill="none" stroke="#BE2D2C" stroke-width="100" mask="url(#mask)">
 <path d="M -250,-25 V 0 A 500,450 0 0 0 750,0" stroke-dasharray="50,56.67"/>
</g>
Interrupted lines[edit]
BSicon L3STR3.svg 3-column (end)
BSicon L3STR3.svg <path d="M 250,0.01 A 500,450 0 0 1 -750,0" stroke="#BE2D2C" stroke-width="100" stroke-dasharray="0.01,121.7" stroke-linecap="round" fill="none"/>
BSicon -L3STRq.svg 3-column (middle)
BSicon -L3STRq.svg <path d="M -250,0.01 A 500,450 0 0 0 750,0 V -1" stroke="#BE2D2C" stroke-width="100" stroke-dasharray="0.01,129.8" stroke-dashoffset="32.2" stroke-linecap="round" fill="none"/>

Shifts[edit]

BSicon SHI1r.svg BSicon tSHI1r.svg By 1/4
BSicon SHI1r.svg <path d="M 250,0 C 250,250 125,250 125,500" stroke-width="100" stroke="#BE2D2C" fill="none"/>
BSicon tSHI1r.svg <defs>
 <mask id="mask">
  <rect x="-100" y="-100" width="1200" height="1200" fill="white"/>
  <path d="M 250,0 C 250,250 125,250 125,500" stroke-width="20" fill="none" stroke="black"/>
 </mask>
</defs>
<g mask="url(#mask)" stroke="#BE2D2C" stroke-width="100" fill="none">
 <path d="M 0,0 M 500,0 M 250,-25 V 0 C 250,250 125,250 125,500" stroke-dasharray="50, 54.2"/>
</g>
BSicon BS2r.svg BSicon tBS2r.svg By 2/4
BSicon BS2r.svg <path d="M 250,0 C 250,250 0,250 0,500" stroke-width="100" stroke="#BE2D2C" fill="none"/>
BSicon tBS2r.svg <defs>
 <mask id="mask">
  <rect x="-100" y="-100" width="1200" height="1200" fill="white"/>
  <path d="M 250,0 C 250,250 0,250 0,500" stroke-width="20" fill="none" stroke="black"/>
 </mask>
</defs>
<g mask="url(#mask)" stroke="#BE2D2C" stroke-width="100" fill="none">
 <path d="M 500,0 M 250,-25 V 0 C 250,250 0,250 0,500" stroke-dasharray="50,46.3"/>
</g>
BSicon SHI3r.svg BSicon tSHI3r.svg By 3/4
BSicon SHI3r.svg <path d="M 250,0 C 250,198 -125,302 -125,500" stroke-width="100" stroke="#BE2D2C" fill="none"/>
BSicon tSHI3r.svg <defs>
 <mask id="mask">
  <rect x="-100" y="-100" width="1200" height="1200" fill="white"/>
  <path d="M 250,0 C 250,198 -125,302 -125,500" stroke-width="20" fill="none" stroke="black"/>
 </mask>
</defs>
<g mask="url(#mask)" stroke="#BE2D2C" stroke-width="100" fill="none">
 <path d="M 500,0 M 250,-26 V 0 C 250,198 -125,302 -125,500" stroke-dasharray="52,55.7"/>
</g>
BSicon KRWr.svg BSicon tKRWr.svg By 4/4
BSicon KRWr.svg <path d="M 250,0 C 250,250 -250,250 -250,500" stroke-width="100" stroke="#BE2D2C" fill="none"/>
BSicon tKRWr.svg <defs>
 <mask id="mask">
  <rect x="-100" y="-100" width="1200" height="1200" fill="white"/>
  <path d="M 250,0 C 250,250 -250,250 -250,500" stroke-width="20" fill="none" stroke="black"/>
 </mask>
</defs>
<g mask="url(#mask)" stroke="#BE2D2C" stroke-width="100" fill="none">
 <path d="M 250,-25 V 0 C 250,250 -250,250 -250,500" stroke-dasharray="50,56.75"/>
</g>
BSicon SHI1c4.svg BSicon tSHI1c4.svg Corner 4 for shift by 1/4
BSicon SHI1c4.svg <path d="M 0,0 C 0,250 -125,250 -125,500" stroke-width="100" stroke="#BE2D2C"/>
BSicon tSHI1c4.svg <path d="M 30,0 C 28,269 -95,250 -95,500" stroke-width="40" stroke="#BE2D2C" fill="none" stroke-dasharray="26.5, 57, 53.3, 58, 50"/>
BSicon BS2c4.svg BSicon tBS2c4.svg Corner 4 for shift by 2/4
BSicon BS2c4.svg <path d="M 0,0 C 0,250 -250,250 -250,500" stroke-width="100" stroke="#BE2D2C"/>
BSicon tBS2c4.svg <path d="M 30,0 C 30,265 -220,265 -220,500" stroke-width="40" stroke="#BE2D2C" fill="none" stroke-dasharray="27, 51, 56, 90"/>
BSicon SHI4c4.svg BSicon utSHI4c4.svg Corner 4 for shift by 3/4 or 4/4
BSicon SHI4c4.svg <path d="M 0,0 C 0,250 -500,250 -500,500" stroke-width="100" stroke="#BE2D2C"/>
BSicon utSHI4c4.svg <path d="M 30,0 C 30,250 -380,250 -380,500" stroke-width="40" stroke="#BE2D2C" fill="none" stroke-dasharray="29.5, 53, 60"/>

Interrupted lines[edit]

BSicon LSHI1r.svg Shift by 1/4 to right
BSicon LSHI1r.svg <path d="M 250,0 C 250,250 125,250 125,500" stroke-width="100" stroke="#BE2D2C" fill="none" stroke-linecap="round" stroke-dasharray=".01,130.2"/>
BSicon LKRWr.svg Shift by 4/4 to right
BSicon LKRWr.svg <path d="M 250,0 C 250,250 -250,250 -250,500" stroke-width="100" stroke="#BE2D2C" fill="none" stroke-linecap="round" stroke-dasharray="0.01,125"/>

Junctions[edit]

To/from corner[edit]

BSicon ABZg+4.svg BSicon tABZg+4.svg Junction of through lines and from corner 4
BSicon ABZg+4.svg <path d="M 0,0 73,73 A 604 604 0 0 1 250,500 V 0" stroke-width="100" stroke="#BE2D2C" fill="none"/>
BSicon tABZg+4.svg <defs>
 <mask id="mask">
  <rect x="-100" y="-100" width="1200" height="1200" fill="white"/>
  <path d="M 0,0 73,73 A 604 604 0 0 1 250,500 V 0" stroke-width="20" fill="none" stroke="black"/>
 </mask>
</defs>
<g fill="none" stroke="#BE2D2C" mask="url(#mask)">
 <path d="M 250,525 V 500 A 604 604 0 0 0 73,73 L 0,0" stroke-width="100" stroke-dasharray="50,50,50,50,50,50,50,58.7,55,58.7,55"/>
 <path d="M 220,525 V 0 M 280,525 V 0" stroke-width="40" stroke-dasharray="50"/>
</g>
BSicon ABZ4+2f.svg BSicon tABZ4+2f.svg Junction of lines from corner 2 and front to corner 4
BSicon ABZ4+2f.svg <path d="M 500,500 0,0 73,73 A 604 604 0 0 1 250,500" stroke-width="100" stroke="#BE2D2C" fill="none"/>
BSicon tABZ4+2f.svg <defs>
 <mask id="mask">
  <rect x="-100" y="-100" width="1200" height="1200" fill="white"/>
  <path d="M 500,500 0,0 73,73 A 604 604 0 0 1 250,500" stroke-width="20" fill="none" stroke="black"/>
 </mask>
</defs>
<g stroke="#BE2D2C" stroke-width="100" fill="none" mask="url(#mask)">
 <path d="M 250,525 V 500 A 604 604 0 0 0 73,73 L 0,0" stroke-dasharray="50,55.5"/>
 <path d="M 482.3,482.3 0,0" stroke-dasharray="50,51.15"/>
</g>

Arrows[edit]

Continuation[edit]

BSicon lCONTf.svg Forward
BSicon lCONTf.svg <path d="M 352.5,200 V 250 L 250,352.5 147.5,250 V 200 Z" stroke="none" fill="#BE2D2C"/>
BSicon lCONT1f.svg Corner 1
BSicon lCONT1f.svg <path d="M 500,0 V 145 L 463.75,181.25 318.75,36.25 355,0 Z" stroke="none" fill="#BE2D2C"/>

Direction[edit]

BSicon lNULf.svg Forward
BSicon lNULf.svg <path d="M 200,200 L 250,250 300,200 300,250 250,300 200,250" stroke="none" fill="#000000"/>

Pointer[edit]

BSicon POINTERd.svg Forward
BSicon POINTERd.svg <path d="M 250,194 L 390,55 H 320 V 0 H 180 V 55 H 110 Z" stroke="none" fill="#DA251D"/>

Formations[edit]

Bridges and tunnels[edit]

BSicon BRIDGE.svg Short bridge
BSicon BRIDGE.svg <path d="M 100,140 L 140,180 V 320 L 100,360 M 400,140 L 360,180 V 320 L 400,360" stroke="#80A080" stroke-width="40"/>
BSicon lBRÜCKE.svg Long bridge
BSicon lBRÜCKE.svg <path d="M 55,50 L 125,100 V 400 L 55,450 M 445,50 L 375,100 V 400 L 445,450" stroke="#80a080" stroke-width="50"/>
BSicon ltSTRa.svg Tunnel portal
BSicon ltSTRa.svg <path d="M 75,196 A 1000 2500 0 0 0 425,196" stroke="#80A080" stroke-width="60"/>

Elevated lines[edit]

BSicon lhSTR.svg Line through
BSicon lhSTR.svg <path d="M 125,0 V 500 M 375,0 V 500" stroke="#80A080" stroke-width="50"/>
BSicon lhSTRrf.svg Turn to right
BSicon lhSTRrf.svg <g fill="none" stroke="#80A080" stroke-width="50">
 <circle cx="0" cy="0" r="375"/>
 <circle cx="0" cy="0" r="125"/>
</g>
BSicon lhSTR+4.svg 45° turn from corner 4
BSicon lhSTR+4.svg <path stroke="#80A080" d="M 88.4,-88.4 L 161.4,-15.4 A 719 719 0 0 1 375,500 M -88.4,88.4 L -15.4,161.4 A 479 479 0 0 1 125,500" stroke-width="50" fill="none"/>
BSicon lhBHF.svg Station
BSicon lhBHF.svg <path d="M 125,0 V 69.72 A 175,175 0 0 1 100,159.86 A 175,175 0 0 0 100,340.14 A 175,175 0 0 1 125,430.28 V 500
M 375,0 V 69.72 A 175,175 0 0 0 400,159.86 A 175,175 0 0 1 400,340.14 A 175,175 0 0 0 375,430.28 V 500" stroke="#80A080" stroke-width="50" fill="none"/>

Stations and stops[edit]

BSicon lBHF.svg Major station
BSicon lBHF.svg <circle cx="250" cy="250" r="150" fill="#BE2D2C"/>
BSicon lvBHF-.svg Major station (for half-width icons and for parallel lines)
BSicon lvBHF-.svg <circle cx="125" cy="250" r="125" fill="#BE2D2C"/>
BSicon lHST.svg Minor station/stop
BSicon lHST.svg <circle cx="250" cy="250" r="100" fill="#BE2D2C"/>
BSicon lDST.svg Freight station
BSicon lDST.svg <circle cx="250" cy="250" r="120" stroke="#BE2D2C" stroke-width="60" fill="white"/>
BSicon lINT.svg Interchange
BSicon lINT.svg <circle cx="250" cy="250" r="120" stroke="black" stroke-width="60" fill="white"/>
BSicon lvDST-.svg Freight station (for half-width icons and for parallel lines)
BSicon lvDST-.svg <circle cx="125" cy="250" r="100" stroke="#BE2D2C" stroke-width="50" fill="white"/>
BSicon lvINT-.svg Interchange (for half-width icons and for parallel lines)
BSicon lvINT-.svg <circle cx="125" cy="250" r="100" stroke="black" stroke-width="50" fill="white"/>
BSicon lBST.svg Minor freight station
BSicon lBST.svg <circle cx="250" cy="250" r="80" stroke="#BE2D2C" stroke-width="40" fill="white"/>
BSicon lACC.svg Accessible station
BSicon lACC.svg <circle cx="250" cy="250" r="150" fill="#034EA2"/>
<g fill="white">
 <path d="M 199,294 A 57.4,57.4 0 1 0 293,235 L 296,210 A 79.1,79.1 0 1 1 187,319"/>
 <circle cx="275" cy="150" r="22"/>
</g>
<g stroke="white" stroke-linecap="round" fill="none">
 <path d="M 277,193 268,254.5 H 198 L 164,322" stroke-width="26" stroke-linejoin="round"/>
 <path d="M 215,216 H 272" stroke-width="21"/>
</g>
BSicon lvACC-.svg Accessible station (for half-width icons and for parallel lines)
BSicon lvACC-.svg <circle cx="125" cy="250" r="125" fill="#034EA2"/>
<g transform="translate(-83.3, 41.7) scale(0.833)" fill="white">
 <path d="M 199,294 A 57.4,57.4 0 1 0 293,235 L 296,210 A 79.1,79.1 0 1 1 187,319"/>
 <circle cx="275" cy="150" r="22"/>

 <g stroke="white" stroke-linecap="round" fill="none">
  <path d="M 277,193 268,254.5 H 198 L 164,322" stroke-width="26" stroke-linejoin="round"/>
  <path d="M 215,216 H 272" stroke-width="21"/>
 </g>
</g>
BSicon lHSTACC.svg Accessible stop
BSicon lHSTACC.svg <circle cx="250" cy="250" r="100" fill="#034EA2"/>
<g transform="matrix(0.667, 0, 0, 0.667, 83.3, 83.3)" fill="white">
 <path d="M 199,294 A 57.4,57.4 0 1 0 293,235 L 296,210 A 79.1,79.1 0 1 1 187,319"/>
 <circle cx="275" cy="150" r="22"/>

 <g stroke="white" stroke-linecap="round" fill="none">
  <path d="M 277,193 268,254.5 H 198 L 164,322" stroke-width="26" stroke-linejoin="round"/>
  <path d="M 215,216 H 272" stroke-width="21"/>
 </g>
</g>
BSicon lINTACC.svg Accessible interchange station
BSicon lINTACC.svg <circle cx="250" cy="250" r="125" stroke-width="50" stroke="black" fill="white"/>
<g transform="matrix(0.667, 0, 0, 0.667, 83.3, 83.3)" fill="#034EA2">
 <path d="M 199,294 A 57.4,57.4 0 1 0 293,235 L 296,210 A 79.1,79.1 0 1 1 187,319"/>
 <circle cx="275" cy="150" r="22"/>

 <g stroke="#034EA2" stroke-linecap="round" fill="none">
  <path d="M 277,193 268,254.5 H 198 L 164,322" stroke-width="26" stroke-linejoin="round"/>
  <path d="M 215,216 H 272" stroke-width="21"/>
 </g>
</g>
BSicon lvINTACC-.svg Accessible interchange station (for half-width icons and for parallel lines)
BSicon lvINTACC-.svg <circle cx="125" cy="250" r="104" stroke-width="42" stroke="black" fill="white"/>
<g transform="matrix(0.54, 0, 0, 0.54, -8, 117)" fill="#034EA2">
 <path d="M 199,294 A 57.4,57.4 0 1 0 293,235 L 296,210 A 79.1,79.1 0 1 1 187,319"/>
 <circle cx="275" cy="150" r="22"/>

 <g stroke="#034EA2" stroke-linecap="round" fill="none">
  <path d="M 277,193 268,254.5 H 198 L 164,322" stroke-width="26" stroke-linejoin="round"/>
  <path d="M 215,216 H 272" stroke-width="21"/>
 </g>
</g>
BSicon kHST3 any.svg (Any) station on "k"-curve to right
BSicon kHST3 any.svg <circle cx="212" cy="250" r="100" fill="#D77F7E"/>
BSicon HST3 any cubic.svg (Any) station on line to corner 3
BSicon HST3 any cubic.svg <circle cx="197" cy="250" r="100" fill="#D77F7E"/>
BSicon 3HST3 any.svg (Any) station on 3-column loop to right
BSicon 3HST3 any.svg <circle cx="167" cy="250" r="100" fill="#D77F7E"/>
BSicon HSTrf any.svg (Any) station on line to right
BSicon HSTrf any.svg <circle cx="176.8" cy="176.8" r="100" fill="#D77F7E"/>
BSicon CPICr.svg Cross-platform interchange
BSicon CPICr.svg <path d="M 0,250 H 250" stroke="black" stroke-width="150"/>
<path d="M 0,250 H 250" stroke="#B3B3B3" stroke-width="100"/>
<path d="M 250,-25 V 500" stroke="#BE2D2C" stroke-width="100"/>
<circle cx="250" cy="250" r="150" fill="#BE2D2C"/>

Other features[edit]

BSicon lHUB.svg Hub
BSicon lHUB.svg <rect x="50" y="50" width="400" height="400" rx="150" fill="none" stroke="black" stroke-width="20" stroke-opacity="0.5"/>
BSicon BOOT.svg Ferry
BSicon BOOT.svg <path fill="#000000" d="
 M 11.3,274.7 H 98.7 L 108.7,254.6 H 459.6 L 470.1,274.7 H 488.7 V 345.2 A 100,100 0 0 1 369.4,345.2 A 100,100 0 0 1 250.1,345.2 A 100,100 0 0 1 130.8,345.2 A 100,100 0 0 1 68.3,365.3 Z
 M 227,113.4 H 236.9 L 230.4,134 H 246.8 V 148.1 H 225.9 L 192.3,254.6 H 147.9 Z
 M 137.3,196.3 H 210.2 L 227,214.3 H 348.6 L 376.7,164.2 H 416.4 V 214.3 H 438.6 L 449.1,234.5 H 118.5 Z"/>
BSicon WASSER.svg Unnavigable waterway
BSicon WASSER.svg <path d="M 240,-27 C 260,20 280,100 282,140 C 290,235 210,265 218,360 C 220,400 240,480 260,527" stroke="#007CC3" stroke-width="75" fill="none"/>

Colours[edit]

  • dark colour means a currently open line / facility
  • light colour means either a closed line / route / facility or one under construction / planned
  • red indicates heavy rail or freight line
  • blue indicates light rail, metro or tram line.
Existing lines
in current use
Lines not in use
(planned or closed)
heavy rail
   #be2d2c BSicon BHF.svg
   #d77f7e BSicon exBHF.svg
metro/light rail & canals
   #003399 BSicon uBHF.svg
   #6281c0 BSicon uexBHF.svg
Berlin S-Bahn
   #006e34 BSicon lSBHF.svg
   #5abf89 BSicon exlSBHF.svg
accessibility
   #034EA2 BSicon lACC.svg
   #6592C5 BSicon exlACC.svg
other features
   #000000 BSicon BAHN.svg
   #aaaaaa BSicon exBAHN.svg
platforms
   #888888 BSicon BSl.svg
   #cccccc BSicon exBSl.svg
 
other routes & special circumstances
(e.g. fare-free zones on a light-rail line)
footpaths
(set f)
unwatered canals
(set g)
   #008000 BSicon fBHF.svg
   #2ca05a BSicon gBHF.svg
formations and structures
   #80a080 BSicon lDSTR.svg BSicon BRIDGEq.svg BSicon PORTALg.svg BSicon lhSTRa.svg
interchanges and depôts (BSicon DST.svg) border fill
   #000000 BSicon lINT.svg
   #FFFFFF BSicon lDST.svg
cross-platform interchanges border fill
   #000000 BSicon CPIC.svg
   #b3b3b3
other colours background watercourses
   #f9f9f9
   #007cc3 BSicon WASSER.svg

The full set of line colours is at Category:Icons for railway descriptions/other colors.

See also[edit]

SVG coding[edit]