BSicon/Icon geometry and SVG code neatness

From Wikimedia Commons, the free media repository
Jump to navigation Jump to 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</title> <!-- optional; normally the name of the icon -->
             ⋮
  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 elevated 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.). If an icon with the desired element does not already exist, to get the necessary modification from an existing icon, 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/h operators with V/v operators, and vice versa): M 125,0 V 500 → M 0,125 H 500.
  •   →   — Transpose the element horizontally, vertically or diagonally: add or subtract the needed amount from respective coordinates.
    For example, to calculate the path for elevated formations in corner 1  : (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.39px from it along the x-axis, and as much along the y-axis, i. e. M 411.61,88.39. 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 611.6,288.4. This can be abbreviated by using relative coordinates, and by moving the starting position diagonally such that either the x- or y-coordinate is a whole number: m 303,-20.22 250,250.
  • Note that for elliptical arcs (A or 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.
  • Note also that parallel horizontal and vertical tracks are 125px apart, but diagonal parallel tracks are about 500 × √2 ÷ 6 ≈ 117.85px apart. This allows all diagonal tracks to be parallel to each other.

More complicated changes are necessary for other new icons.

  • Adding tunnel dashes: SVG mask code can be copied from other tunnel icons (they are usually necessary for drawing tunnel curves) or from the example code in the next section. The <mask>, which should be inside the <defs> tag, is used through the code mask="url(#mask-id)" on an element, where mask-id is the value of the mask's id attribute. The mask attribute must be on a group and not a path due to a librsvg bug (no Phabricator ticket yet).
    The usual convention for tunnel dashes, which are created using the stroke-dasharray attribute, is to have each dash be 50px long. Path endings at corners at an angle of 45° usually have dashes starting 25px along the line (25 ÷ √2 ≈ 17.68px from each side), and path endings normal (perpendicular) to edges usually have dashes starting 25px beyond the icon boundary. The gaps between dashes should be as close to 50px as possible.
    Values for stroke-dasharray are comma-separated numbers alternating between dash length and gap length, with the numbers being repeated if the path is longer than the sum of the numbers. For a typical tunnel line, then, the value begins 50,. The other number can often be determined as follows:
    • Let the length of the visible path in pixels be L. Calculate L (help: C = 2πr).
    • If the path ends at a corner, forming a 45° angle, L becomes 50 less than its original value.
    • Divide L by 100 and round the result to the nearest whole number. This is n.
    • Divide L by n, subtract 50 and round to 2 decimal places. This is the second value for stroke-dasharray.
  • Elevated formations: Bridge railings (excluding non-"elevated" crossings) are most often 125px from the track. Formations which consist only of circular arcs and straight lines can be calculated from the track's path coordinates. Other formations, such as junctions and shifts, should use SVG masks (examples:   (hABZ2+3f),   (hABZ2x3)). As in hABZ2+3f, if all of the elements (track, formations, mask) have exactly the same path, then the xlink XML namespace may be used to reduce duplicate code.

Other complicated calculations may be necessary, especially if multiple curves are combined within an icon. The icons below have derivations and calculated values in comments within their source code.

Lines[edit]

Note, that most descriptions in this section refer to lines as if they start at the top of the image, go down, and finish at the bottom.

Straight[edit]

Line through
<path stroke="#BE2D2C" d="M 250,0 V 500" stroke-width="100" />
<path stroke="#BE2D2C" d="M 220,525 V 0 m 60,525 V 0" stroke-width="40" stroke-dasharray="50" />
Right parallel line
<path stroke="#BE2D2C" d="M 125,0 V 500" stroke-width="100" />
<path stroke="#BE2D2C" d="M 95,525 V 0 m 60,525 V 0" stroke-width="40" stroke-dasharray="50" />
Narrow line through
<path stroke="#BE2D2C" d="M 250,0 V 500" stroke-width="50" />
<path stroke="#BE2D2C" d="M 250,-25 V 525 V" stroke-width="40" stroke-dasharray="50" />
Line to corner 2 from corner 4
<path stroke="#BE2D2C" d="M 0,0 V 500,500" stroke-width="100" />
<path stroke="#BE2D2C" d="M 503.5,461 39,-3.5 M 461,503.5 -3.5,39" stroke-width="40" stroke-dasharray="50,51.15" />

Interrupted lines[edit]

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

Turns and curves[edit]

Turn to right
<circle stroke="#BE2D2C" cx="0" cy="0" r="250" stroke-width="100" fill="none" />
(Alternatively:)
<path stroke="#BE2D2C" d="M 250,0 A 250 250 0 0 1 0,250" stroke-width="100" fill="none" />
<g stroke="#BE2D2C" stroke-width="40" 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>
Right parallel line to upper right
<circle stroke="#BE2D2C" cx="0" cy="0" r="125" stroke-width="100" fill="none" />
<g stroke="#BE2D2C" stroke-width="40" 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>
Left parallel line to lower right
<circle stroke="#BE2D2C" cx="0" cy="0" r="375" stroke-width="100" fill="none" />
<g stroke="#BE2D2C" stroke-width="40" 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>
Line from corner 4
<path stroke="#BE2D2C" d="M 0,0 73.22,73.22 A 603.55 603.55 0 0 1 250,500" stroke-width="100" fill="none" />
<defs>
 <mask id="M">
  <circle r="999" fill="#FFF" />
  <path d="M 0,0 73.22,73.22 A 603.55 603.55 0 0 1 250,500" stroke-width="20" stroke="#000" fill="none" />
 </mask>
</defs>
<g mask="url(#M)" stroke="#BE2D2C" stroke-width="100" fill="none">
 <path d="m 500,0 0,0 M 250,525 V 500 A 603.55,603.55 0 0 0 73.22,73.22 L 0,0" stroke-dasharray="50,55.49" />
</g>
Right parallel line from corner 4
<path stroke="#BE2D2C" d="M 0,0 36.6,36.6 A 301.78,301.78 0 0 1 125,250 V 500" stroke-width="100" fill="none" />
<defs>
 <mask id="M">
  <circle r="999" fill="#FFF" />
  <path d="M 125,525 V 250 A 301.78,301.78 0 0 0 36.61,36.61 L 0,0" stroke-width="20" stroke="#000" fill="none" />
 </mask>
</defs>
<g mask="url(#M) stroke="#BE2D2C" stroke-width="100" fill="none"">
 <path d="M 250,0 M 125,525 V 250 A 301.78,301.78 0 0 0 36.61,36.61 L 0,0" stroke-dasharray="50,47.8" />
</g>
Left parallel line from corner 4
<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" />
<defs>
 <mask id="M">
  <circle r="999" fill="#FFF" />
  <path d="M 375,500 A 301.78,301.78 0 0 0 286.6,286.6 L 0,0" stroke-width="20" stroke="#000" fill="none" />
 </mask>
</defs>
<g mask="url(#M)" stroke="#BE2D2C" stroke-width="100" fill="none">
 <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>
Corner 4 for line at 45°
<path d="M -50,50 50,-50" stroke-width="100" stroke="#BE2D2C" />
<path stroke="#BE2D2C" d="M 74.2,-31.8 -31.8,74.2" stroke-dasharray="50" stroke-width="40" />
Interrupted lines[edit]
Line to right
<path stroke="#BE2D2C" d="M 250,0 a 250,250 0 0 1 -500,0" stroke-width="100" stroke-linecap="round" stroke-dasharray="0,130.9" />
<g stroke="#BE2D2C" stroke-width="40" stroke-linecap="round" fill="none">
 <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>
Line from regular position at corner 4
<path d="M 35.3,35.3 73.22,73.22 A 603.55 603.55 0 0 1 250,500 v 1" stroke-width="100" stroke="#BE2D2C" stroke-linecap="round" fill="none" stroke-dasharray="0,131.9" />
<g stroke="#BE2D2C" stroke-width="40" stroke-linecap="round" fill="none">
 <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>
Right parallel line from regular position at corner 4
<path stroke="#BE2D2C" d="M 35.3,35.3 C 125,125 125,250 125,500" stroke-width="100" stroke-linecap="round" fill="none" stroke-dasharray=".01,121.3" />

Multiple-column turns[edit]

Turn to right (start)
<path stroke="#BE2D2C" d="M -482.84,750 A 732.84 732.84 0 0 0 250,17.16 V 0" stroke-width="100" fill="none" />
<defs>
 <mask id="M">
  <circle r="999" fill="#FFF" />
  <path d="M -482.84,750 A 732.84 732.84 0 0 0 250,17.16 V 0" stroke-width="20" stroke="#000" fill="none" />
 </mask>
</defs>
<g mask="url(#M)" stroke="#BE2D2C" stroke-width="100" fill="none">
 <path d="M 250,-25 V 17.16 A 732.84 732.84 0 0 1 -482.84,750" stroke-dasharray="50,48.79" />
</g>
Turn to right (corner)
<circle stroke="#BE2D2C" cx="-482.84" cy="-482.84" r="732.84" stroke-width="100" fill="none" />
<defs>
 <mask id="M">
  <circle r="999" fill="#FFF" />
  <circle cx="-482.84" cy="-482.84" r="732.84" stroke-width="20" stroke="#000" fill="none" />
 </mask>
</defs>
<g mask="url(#M)" stroke="#BE2D2C" stroke-width="100" fill="none">
 <path d="M 250,-525 v 42.16 A 732.84 732.84 0 0 1 -482.84,250" stroke-dasharray="50,48.79" />
</g>
Turn to right (end)
<path stroke="#BE2D2C" d="M 750,-482.84 A 732.84 732.84 0 0 1 17.16,250 H 0" stroke-width="100" fill="none" />
<defs>
 <mask id="M">
  <circle r="999" fill="#FFF" />
  <path d="M 750,-482.84 A 732.84 732.84 0 0 1 17.16,250 H 0" stroke-width="20" stroke="#000" fill="none" />
 </mask>
</defs>
<g mask="url(#M)" stroke="#BE2D2C" stroke-width="100" fill="none">
 <path d="M -25,250 H 17.16 A 732.84 732.84 0 0 0 750,-482.84" stroke-dasharray="50,48.79" />
</g>
3-column (end)
<path d="M -750,0 A 500 450 1 0 0 250,0" stroke-width="100" stroke="#BE2D2C" fill="none" />
<defs>
 <mask id="M">
  <circle r="999" fill="#FFF" />
  <path d="M 250,0 A 500,450 0 0 1 -750,0" stroke-width="20" stroke="#000" fill="none" />
 </mask>
</defs>
<g mask="url(#M)" stroke="#BE2D2C" stroke-width="100" fill="none">
 <path d="M 250,-25 V 0 A 500,450 0 0 1 -750,0" stroke-dasharray="50,56.67" />
</g>
3-column (middle)
<path d="M -250,0 A 500 450 0 0 0 750,0" stroke-width="100" stroke="#BE2D2C" fill="none" />
<defs>
 <mask id="M">
  <circle r="999" fill="#FFF" />
  <path d="M -250,0 A 500,450 0 0 0 750,0" stroke-width="20" stroke="#000" fill="none" />
 </mask>
</defs>
<g mask="url(#M)" stroke="#BE2D2C" stroke-width="100" fill="none">
 <path d="M -250,-25 V 0 A 500,450 0 0 0 750,0" stroke-dasharray="50,56.67" />
</g>
Interrupted lines[edit]
3-column (end)
<path stroke="#BE2D2C" d="M 250,0.01 A 500,450 0 0 1 -750,0" stroke-width="100" stroke-dasharray="0.01,121.7" stroke-linecap="round" fill="none" />
3-column (middle)
<path stroke="#BE2D2C" d="M -250,0.01 A 500,450 0 0 0 750,0 V -1" stroke-width="100" stroke-dasharray="0.01,129.8" stroke-dashoffset="32.2" stroke-linecap="round" fill="none" />

Shifts[edit]

By 1/4
<path d="M 250,0 C 250,250 125,250 125,500" stroke-width="100" stroke="#BE2D2C" fill="none" />
<defs>
 <mask id="M">
  <circle r="999" fill="#FFF" />
  <path d="M 250,0 C 250,250 125,250 125,500" stroke-width="20" stroke="#000" fill="none" />
 </mask>
</defs>
<g mask="url(#M)" 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.276" />
</g>
By 2/4
<path d="M 250,0 C 250,250 0,250 0,500" stroke-width="100" stroke="#BE2D2C" fill="none" />
<defs>
 <mask id="M">
  <circle r="999" fill="#FFF" />
  <path d="M 250,0 C 250,250 0,250 0,500" stroke-width="20" stroke="#000" fill="none" />
 </mask>
</defs>
<g mask="url(#M)" 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.291" />
</g>
By 3/4
<path d="M 250,0 C 250,198 -125,302 -125,500" stroke-width="100" stroke="#BE2D2C" fill="none" />
<defs>
 <mask id="M">
  <circle r="999" fill="#FFF" />
  <path d="M 250,0 C 250,250 -125,250 -125,500" stroke-width="20" stroke="#000" fill="none" />
 </mask>
</defs>
<g mask="url(#M)" 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,57.352" />
</g>
By 4/4
<path d="M 250,0 C 250,250 -250,250 -250,500" stroke-width="100" stroke="#BE2D2C" fill="none" />
<defs>
 <mask id="M">
  <circle r="999" fill="#FFF" />
  <path d="M 250,0 C 250,250 -250,250 -250,500" stroke-width="20" stroke="#000" fill="none" />
 </mask>
</defs>
<g mask="url(#M)" 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>
Corner 4 for shift by 1/4
<path d="M 0,0 C 0,250 -125,250 -125,500" stroke-width="100" stroke="#BE2D2C" />
<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" />
Corner 4 for shift by 2/4
<path d="M 0,0 C 0,250 -250,250 -250,500" stroke-width="100" stroke="#BE2D2C" />
<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" />
Corner 4 for shift by 3/4 or 4/4
<path d="M 0,0 C 0,250 -500,250 -500,500" stroke-width="100" stroke="#BE2D2C" />
<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]

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

 <path d="M 280,-10 V 0 C 280,275 -220,275 -220,500 V 510" stroke-dasharray="20,145.6" />
 <path d="M 220,-10 V 0 C 220,225 -280,225 -280,500 V 510" stroke-dasharray="20,113" />

</g>

Junctions[edit]

To/from corner[edit]

Junction of through lines and from corner 4
<path d="M 0,0 73.22,73.22 A 603.55 603.55 0 0 1 250,500 V 0" stroke-width="100" stroke="#BE2D2C" fill="none" />
<defs>
 <mask id="M">
  <circle r="999" fill="#FFF" />
  <path d="M 0,0 73.22,73.22 A 603.55 603.55 0 0 1 250,500 V 0" stroke-width="20" stroke="#000" fill="none" />
 </mask>
</defs>
<g fill="none" stroke="#BE2D2C" stroke-width="100" mask="url(#M)">
 <path d="M 250,525 V 500 A 603.55 603.55 0 0 0 73.22,73.22 L 0,0" stroke-dasharray="50,50,50,50,50,50,50,58.7,55,58.7,55" />
 <path d="M 250,525 V 0" stroke-dasharray="50" />
</g>
Junction of lines from corner 2 and front to corner 4
<path d="M 500,500 0,0 73.22,73.22 A 603.55 603.55 0 0 1 250,500" stroke-width="100" stroke="#BE2D2C" fill="none" />
<defs>
 <mask id="M">
  <circle r="999" fill="#FFF" />
  <path d="M 500,500 0,0 73.22,73.22 A 603.55 603.55 0 0 1 250,500" stroke-width="20" stroke="#000" fill="none" />
 </mask>
</defs>
<g stroke="#BE2D2C" stroke-width="100" fill="none" mask="url(#M)">
 <path d="M 250,525 V 500 A 603.55 603.55 0 0 0 73.22,73.22 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]

Forward
<path fill="#BE2D2C" d="M 352.5,200 V 250 L 250,352.5 147.5,250 V 200 Z" stroke="none" />
Corner 1
<path stroke="#BE2D2C" d="M 392.17,107.83 500,0" stroke-width="205" />

Direction[edit]

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

Pointer[edit]

Forward
<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]

 
hSTRae

  • formation length: varies
  • abutment: 70 outward/55 onward
  • stroke width: 50
  • distance from line: 50 (125 ℄–℄)

 
KRZo

  • formation length: 100
  • abutment: 50/50
  • stroke width: 40
  • distance from line: 30 (105 ℄–℄)

 
kKRZ3+lo

  • formation length: 120
  • abutment: 40/40
  • stroke width: 40
  • distance from line: 20 (90 ℄–℄)

Bridges and tunnels[edit]

Short bridge
<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" />
Long bridge
<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" />
Tunnel portal
<path d="m 75,200 a 1000,2500 0 0 0 350,0" stroke="#80A080" stroke-width="60" fill="none" />

Elevated lines[edit]

Line through
<path d="M 125,0 V 500 M 375,0 V 500" stroke="#80A080" stroke-width="50" />
Turn to right
<g fill="none" stroke="#80A080" stroke-width="50">
 <circle cx="0" cy="0" r="375" />
 <circle cx="0" cy="0" r="125" />
</g>
45° turn from corner 4
<path stroke="#80A080" d="m 86.61,-90.17 75,75 A 728.55,728.55 0 0 1 375,500 M -90.17,86.61 l 75,75 A 478.55,478.55 0 0 1 125,500" stroke-width="50" fill="none" />
Station
<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" />
Tunnel portal
<path d="M 109.78,200 a 1000,3000 0 0 0 280.44,0 M 125,0 V 223.01 m 250,0 V 0" stroke="#80A080" stroke-width="50" fill="none" />

Stations and stops[edit]

Major station
<circle cx="250" cy="250" r="150" fill="#BE2D2C" />
Major station (for half-width icons and for parallel lines)
<circle cx="125" cy="250" r="125" fill="#BE2D2C" />
Minor station/stop
<circle cx="250" cy="250" r="100" fill="#BE2D2C" />
Freight station
<circle cx="250" cy="250" r="120" stroke="#BE2D2C" stroke-width="60" fill="#FFF" />
Interchange
<circle cx="250" cy="250" r="125" stroke="#000" stroke-width="50" fill="#FFF" />
Freight station (for half-width icons and for parallel lines)
<circle cx="125" cy="250" r="100" stroke="#BE2D2C" stroke-width="50" fill="#FFF" />
Interchange (for half-width icons and for parallel lines)
<circle cx="125" cy="250" r="104" stroke="#000" stroke-width="42" fill="#FFF" />
Minor freight station
<circle cx="250" cy="250" r="80" stroke="#BE2D2C" stroke-width="40" fill="#FFF" />
Accessible station
<circle cx="250" cy="250" r="150" fill="#034EA2" />
<g fill="#FFF">
 <path d="M 199,294 A 57.4,57.4 0 1 0 293,235 l 3,-25 A 79.1,79.1 0 1 1 187,319" />
 <circle cx="275" cy="150" r="22" />
</g>
<g stroke="#FFF" stroke-linecap="round" fill="none">
 <path d="M 277,193 269,253.5 H 197.5 L 163,323.5" stroke-width="26" stroke-linejoin="round" />
 <path d="M 214,215.5 H 272" stroke-width="21" />
</g>
Accessible station (for half-width icons and for parallel lines)
<circle cx="125" cy="250" r="125" fill="#034EA2" />
<g transform="translate(-83.3, 41.7) scale(0.833)" fill="#FFF">
 <path d="M 199,294 A 57.4,57.4 0 1 0 293,235 l 3,-25 A 79.1,79.1 0 1 1 187,319" />
 <circle cx="275" cy="150" r="22" />
 <g stroke="#FFF" stroke-linecap="round" fill="none">
  <path d="M 277,193 269,253.5 H 197.5 L 163,323.5" stroke-width="26" stroke-linejoin="round" />
  <path d="M 214,215.5 H 272" stroke-width="21" />
 </g>
</g>
Accessible stop
<circle cx="250" cy="250" r="100" fill="#034EA2" />
<g transform="matrix(0.667, 0, 0, 0.667, 83.3, 83.3)" fill="#FFF">
 <path d="M 199,294 A 57.4,57.4 0 1 0 293,235 l 3,-25 A 79.1,79.1 0 1 1 187,319" />
 <circle cx="275" cy="150" r="22" />
 <g stroke="#FFF" stroke-linecap="round" fill="none">
  <path d="M 277,193 269,253.5 H 197.5 L 163,323.5" stroke-width="26" stroke-linejoin="round" />
  <path d="M 214,215.5 H 272" stroke-width="21" />
 </g>
</g>
Accessible interchange station
<circle cx="250" cy="250" r="125" stroke-width="50" stroke="#000" fill="#FFF" />
<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 3,-25 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 269,253.5 H 197.5 L 163,323.5" stroke-width="26" stroke-linejoin="round" />
  <path d="M 214,215.5 H 272" stroke-width="21" />
 </g>
</g>
Accessible interchange station (for half-width icons and for parallel lines)
<circle cx="125" cy="250" r="104" stroke-width="42" stroke="#000" fill="#FFF" />
<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 3,-25 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 269,253.5 H 197.5 L 163,323.5" stroke-width="26" stroke-linejoin="round" />
  <path d="M 214,215.5 H 272" stroke-width="21" />
 </g>
</g>
(Any) station on "k"-curve to corner 3
<circle cx="212.03" cy="250" r="100" fill="#D77F7E" />
(Any) station on line to corner 3
<circle cx="195.79" cy="250" r="100" fill="#D77F7E" />
(Any) station on 3-column loop to corner 3
<circle cx="165.74" cy="250" r="100" fill="#D77F7E" />
(Any) station on line to right
<circle cx="176.78" cy="176.78" r="100" fill="#D77F7E" />
Cross-platform interchange
<path fill="#B3B3B3" stroke="#000" d="M 0,187.5 H 250 V 312.5 H 0" stroke-width="25" />
<path d="M 250,-25 V 500" stroke="#BE2D2C" stroke-width="100" />
<circle cx="250" cy="250" r="150" fill="#BE2D2C" />

Other features[edit]

Hub
<rect stroke="#000" opacity=".5" x="50" y="50" width="400" height="400" rx="150" stroke-width="20" fill="none" />
Unnavigable waterway
<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" />
Border / Divider
<path d="M 250,20 V 500" stroke="#000" stroke-width="40" stroke-dasharray="85,40" />
<g stroke-width="40" >
 <path d="M 250,0 V 500" stroke="#ccc" />
 <path d="M 250,20 V 500" stroke="#aaa" stroke-dasharray="85,40" />
</g>
Connector / Electrification
<path d="M 250,20 V 500" stroke="#000" stroke-width="40" />

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.
In use
(existing)		 Not in use
(planned or closed)
heavy rail
 
#be2d2c
 
#d77f7e
metro/light rail & canals (set u)
 
#003399
 
#6281c0
footpaths (set f)
 
#008000
 
#64B164
unwatered canals (set g)
 
#2ca05a
 
#7ec49a
formations and structures
 
#80a080
watercourses
 
#007cc3
platforms
 
#888888
 
#cccccc
accessibility
 
#034ea2
 
#6592c5
other features
 
#000000
 
#aaaaaa
German S-Bahn stations
 
#006e34
 
#5abf89
roads
 
#999999
border fill
interchange
 
#000000
 
#ffffff
cross-platform interchange
 
#000000
 
#b3b3b3
background
 
#f9f9f9

The full set of line colours is at Category:BSicon/railway/other colors.

See also[edit]

SVG coding[edit]

Retrieved from "https://commons.wikimedia.org/w/index.php?title=BSicon/Icon_geometry_and_SVG_code_neatness&oldid=761196345"