BSicon/Icon geometry and SVG code neatness

<?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>

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.

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.

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.

• 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.

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