User:Sameboat

From Wikimedia Commons, the free media repository
Jump to: navigation, search
Sameboat: This is how dogs dinner is being served


About me[edit]

Gallery[edit]

Hong Kong MTR[edit]

Moscow Metro[edit]

St. Petersburg Metro[edit]

United Kingdom[edit]

China[edit]

Basic SVG template for railway diagram[edit]

  • Copy the following codes to any text editor. Save as .svg file and load it in any modern browser.
  • Attribute "d" contains the path data in path element. In most cases I use absolute value (uppercase path command) for moveto (M, beginning of any new path), straight line (L), horizontal line (H) and vertical line (V); relative value (lowercase path command) for curves (a, q, c) because curve commands contain more parameters. The path data format (new line for any straight line command) I employ as seen in the template below is non-standard, but I think it's clearer for human understanding.
  • Upload the SVG file to SVG Check for temporary PNG preview rendered by librsvg on Wikimedia.
  • If you load the codes in Inkscape or other graphic editors, the transform values will most likely be transformed into ciphered/esoteric matrix values. It's a pain in the neck to decipher the matrix value manually.
  • SVG-edit requires attribute y accompanying attribute dy in the same element tag to work properly. Otherwise it will assume a random value for y instead of inheriting the value of y from the parent text or tspan elements.
<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="200"
viewBox="0 0 300 200"
>
	<title>Basic SVG template for railway diagram</title>
	<style type="text/css">
<!--type="text/css" is required otherwise librsvg won't load anything from style element.-->
<!--Class name begins with a dot in the style element. It is recalled in other element with the "class" attribute.-->
text {font-family:Arimo,Liberation Sans,Arial,sans-serif}
.me {fill:none;stroke-width:5}
.spiccadilly {stroke:#0019A8}
	</style>
	<defs><!--stores objects to be used for more than once with the "use" element.-->
		<path id="term" class="me" d="M -8,0 H 8"/>
		<path id="st" class="me" d="M 1,0 H 7.5"/>
		<use xlink:href="#term" id="termpiccadilly" class="spiccadilly"/>	
		<use xlink:href="#st" id="stpiccadilly" class="spiccadilly"/>
		<g id="int">
			<circle cx="0" cy="0" r="8.25" fill="#fff"/>
			<circle cx="0" cy="0" r="6" style="fill:#fff;stroke:#000;stroke-width:3"/>
		</g>
	</defs>
	<rect id="background" x="-10" y="-10" width="500" height="500" fill="#eee"/>
	<g id="Line_route" class="me">
<!--Never leave any space in id name and do not begin the id name with number; avoid punctuation and non-English characters too.-->
<!--You can add more class in the same class attribute. Separate the classes with a space.-->
		<path id="Piccadilly_line_route" class="spiccadilly" d="
		M 40,40
		H 100 q 14,0 24,10
		L 164,90 q 10,10 10,24
		V 170
		"/>
	</g>
	<g id="Piccadilly_line_station_icons">
		<use xlink:href="#termpiccadilly" transform="translate(40,40)rotate(90)" id="Uxbridge"/>
		<use xlink:href="#stpiccadilly" transform="translate(95,40)rotate(-90)" id="Sudbury_Town"/>
		<use xlink:href="#int" x="134" y="60" id="Hammersmith"/>
<!--int icon is omnidirectional so no need for transform/rotate on diagonal line.-->
		<use xlink:href="#stpiccadilly" transform="translate(164,90)rotate(135)" id="Knightsbridge"/>
		<use xlink:href="#stpiccadilly" x="174" y="130" id="Russell_Square"/>
		<use xlink:href="#termpiccadilly" x="174" y="170" id="Cockfosters"/>
	</g>
	<g id="text_labels" font-size="15px" transform="translate(0,5)">
<!--Unlike other attributes, value of font-size attribute should always include the unit (px) otherwise it may be interpreted differently.-->
<!--Translate value equalizes the height difference of text labels above and below the horizontal line.-->
		<g text-anchor="middle">
			<text x="40" y="58">Uxbridge</text>
<!--y of text below horizontal line = y of icon +18.-->
			<text x="95" y="22">Sudbury Town</text>
<!--y of text above horizontal line = y of icon -18.-->
		</g>
		<text x="144" y="50">Hammersmith &amp; City</text>
<!--x,y of text alongside diagonal line = x,y of icon ±10. Use &amp; for &.-->
		<text x="154" y="100" text-anchor="end">Knightsbridge</text>
		<text x="186" y="124">Russell <tspan x="186" dy="13">Square</tspan></text>
<!--x of text on the right-hand side of vertical line = x of icon +12.-->
<!--Use tspan for broken label. Increase dy value for greater line height of text.-->
<!--Subtract y value of the text element by half of the dy value for vertically centred 2-line text.-->
		<text x="162" y="170" text-anchor="end">Cockfosters</text>
<!--x of text on the left-hand side of vertical line = x of icon -12.-->
	</g>
</svg>

Useful curves for SVG topological diagram[edit]

  • The origin (0,0) is located at the upper-left corner of the image.
  • Strictly speaking, the control points of my quadratic Bézier curves do not give the perfect circular arcs, they are simply the intersections of the 2 straight lines. Knowing the relative position of this intersection helps calculating the destination of the entry straight line before the curve kicks in, even if you're using the equivalent elliptical arc command.
  • In this tutorial, zero degree (0°) is pointing to right/east as per the left-to-right writing convention.
  • The letter case of the path commands (L, Q, A, etc.) in the path data is case-sensitive. Uppercase denotes absolute position of the following value(s); lowercase denotes relative position to the last absolute value.
  • The comma (,) between x and y coordinates and flag values can be replaced by white-space. I just feel using the comma is clearer.
  • You can hard return within the path data as you please.
  • SVG rotation property accepts negative angle degree value and degree value greater than 360 (e.g. -45 or 730). Not really related to this topic, jfyi.
  • Most values in this tutorial are rounded for ease of remembering and calculating. They are not meant to be absolutely accurate. But the inaccuracy is very unnoticeable to the naked eye.
  • If you are editing the curve with Inkscape's curve tools, it will always convert your modified curve to cubic Bézier curve (C) and revert the shorthanded cubic Bézier curve command (S) back to non-shorthanded command.
  • When making concentric curves closely juxtapose to each other, use the same curve command (preferably elliptical arc). Mixing 2 different curve commands will result in undesirable gap between the curves.

45°[edit]

Red curve: q 14,0 24,10
Green curve: q 10,10 24,10
Quadratic Bézier curve[1]
Angle from/to Path data Mid. position Mid. rotation
Cardinal direction to ordinal direction
0° to 45° →↘ BSicon STR2+r.svg q 14,0 24,10 (13,2.6) 22.5°
a 34,34 0 0,1 24,10
c 10,0 17,3 24,10
c 9,0 17.6,3.6 24,10
0° to -45°/315° →↗ BSicon STRr+1.svg q 14,0 24,-10 (13,-2.6) -22.5°/337.5°
90° to 135° ↓↙ BSicon STR3.svg q 0,14 -10,24 (-2.6,13) 112.5°
90° to 45° ↓↘ BSicon STR2.svg q 0,14 10,24 (2.6,13) 67.5°
180° to -135°/225° ←↖ BSicon STRl+4.svg q -14,0 -24,-10 (-13,-2.6) -157.5°/202.5°
180° to 135° ←↙ BSicon STR3+l.svg q -14,0 -24,10 (-13,2.6) 157.5°
-90/270° to -45°/315° ↑↗ BSicon STR+1.svg q 0,-14 10,-24 (2.6,-13) -67.5°/292.5°
-90/270° to -135°/225° ↑↖ BSicon STR+4.svg q 0,-14 -10,-24 (-2.5,-12.9) -112.5°/247.5°
Ordinal direction to cardinal direction
45° to 90° ↘↓ BSicon STR+4.svg q 10,10 10,24 (7.4,11) 67.5°
45° to 0° ↘→ BSicon STRl+4.svg q 10,10 24,10 (11,7.4) 22.5°
135° to 180° ←↙ BSicon STR3+l.svg q -10,10 -24,10 (-11,7.4) 157.5°
135° to 90° ↙↓ BSicon STR+1.svg q -10,10 -10,24 (-7.4,11) 112.5°
-45°/315° to 0° ↗→ BSicon STR3+l.svg q 10,-10 24,-10 (11,-7.4) -22.5°/337.5°
-45°/315° to -90°/270° ↗↑ BSicon STR3.svg q 10,-10 10,-24 (7.4,-11) -67.5°/292.5°
-135°/225° to -90°/270° ↖↑ BSicon STR2.svg q -10,-10 -10,-24 (-7.4,-11) -112.5°/247.5°
-135°/225° to 180° ↖← BSicon STR2+r.svg q -10,-10 -24,-10 (-11,-7.4) -157.5°/202.5°
  • The coordinates of the control point and destination are found with simple Pythagorean theorem. The x of the control point in the 1st example should be accurately:

\sqrt{2 \left ( 10^2 \right )} = 14.142

45 degree Arc for map explanation.svg
  • If using elliptical arc command (A/a) to draw the circular arc, when the coordinates of the destination, x and y, and the angle θ, are given, the radius (r) of the circular arc can be calculated with the following formula:

r = \frac { \sqrt{x^2+y^2} } { 2 \sin \frac {\theta} {2} }

  • In our 1st example:

r = \frac { \sqrt{24^2+10^2} } { 2 \sin \frac {45} {2} } = 33.9706 \approx 34

  • If the x must be accurate from the calculation with the Pythagorean theorem, the result of the r will be 34.142, still approximately 34.
  • Since the angle of the circular arc is 45°, the radius is as simple as the sum of x and y of destination (34=24+10).
    • Therefore the relations of radius r, x and y in a 45° circular arc can be simplified as:

x = r / 3.4142

r = 3.4142 * x

y = r - x

Concentric 45° arc[edit]

Angle from/to Path data Relative
r-30 →↘ BSicon STR2+r.svg a 4,4 0 0,1 2.8,1.2 x±7,y±3
r-20 a 14,14 0 0,1 10,4
r-10 a 24,24 0 0,1 17,7
r a 34,34 0 0,1 24,10
r+10 a 44,44 0 0,1 31,13
r+20 a 54,54 0 0,1 38,16
r+30 a 64,64 0 0,1 45,19

90°[edit]

SVG elliptical arc (A/a) requires 7 values correctly given to all its parameters. The 1st, 2nd, 4th and 5th parameters are particularly susceptible to any invalid value and may cause the path or the whole SVG unable to be rendered.

  • The first two values are x and y radii respectively. The arc will be drawn from the imaginary circle (identical x and y radii) or ellipse defined by these parameters. Negative value will invalidate the path because they are not position parameters but length parameters.
  • The 3rd value is the degree of x-axis-rotation. This value is only meaningful when the first two values, x and y radii differ with each other which would create an ellipse rather than a perfect circle. But it will affect the offset of the stroke dash (behavior varies depending on which rendering software you are using).
  • The 4th and 5th values are large-arc-flag and sweep-flag respectively. These 2 parameters only accept 0 (zero) or 1 to decide which kind/side of the arc should be drawn out of 4 possibilities.
    • Large-arc-flag (4th parameter) determines if the outer larger arc (1) of the circle/ellipse should be drawn instead of the inner smaller arc (0). Normally for joining other parts of the path smoothly, only 0 value is used.
    • Sweep-flag (5th parameter) determines which side of the arc should be drawn, depending on its direction. Value 1 draws the arc clockwise; value 0 draws the arc counter-clockwise.
  • Same as other curve command parameters, the last 2 parameters (6th and 7th) are the destination position of the curve. The letter case of A/a only affects the absolute or relative positions of these 2 parameters here.
Red arc: a 30,30 0 0,0 -30,30
Green arc: a 30,30 0 0,1 -30,30
Elliptical arc[2]
Angle from/to Path data Mid. position Mid. rotation
Cardinal direction to cardinal direction
0° to 90° →↘↓ BSicon STRlg.svg a 30,30 0 0,1 30,30 (21.2,8.8) 45°
c 16.5,0 30,13.5 30,30
q 27,3 30,30
0° to -90°/270° →↗↑ BSicon STRrf.svg a 30,30 0 0,0 30,-30 (21.2,-8.8) -45°/315°
90° to 180° ↓↙← BSicon STRrf.svg a 30,30 0 0,1 -30,30 (-8.8,21.2) 135°
90° to 0° ↓↘→ BSicon STRlf.svg a 30,30 0 0,0 30,30 (8.8,21.2) 45°
180° to -90°/270° ←↖↑ BSicon STRlf.svg a 30,30 0 0,1 -30,-30 (-8.8,-21.2) -135°/225°
180° to 90° ←↙↓ BSicon STRrg.svg a 30,30 0 0,0 -30,30 (-21.2,8.8) 135°
-90°/270° to 0° ↑↗→ BSicon STRrg.svg a 30,30 0 0,1 30,-30 (8.8,-21.2) -45°/315°
-90°/270° to 180° ↑↖← BSicon STRlg.svg a 30,30 0 0,0 -30,-30 (-8.8,-21.2) -135°/225°
Ordinal direction to ordinal direction
45° to 135° ↘↓↙ BSicon STR3+4.svg a 21.2,21.2 0 0,1 0,30 (6.2,15) 90°
a 30,30 0 0,1 0,42.4 (8.8,21.2)
45° to -45°/315° ↘→↗ BSicon STR14.svg a 21.2,21.2 0 0,0 30,0 (15,6.2)
135° to -135°/225° ↙←↖ BSicon STR14.svg a 21.2,21.2 0 0,1 -30,0 (-15,6.2) 180°
135° to 45° ↙↓↘ BSicon STR2+1.svg a 21.2,21.2 0 0,0 0,30 (-6.2,15) 90°
-135°/225° to -45°/315° ↖↑↗ BSicon STR2+1.svg a 21.2,21.2 0 0,1 0,-30 (-6.2,-15) -90°/270°
-135°/225° to 135° ↖←↙ BSicon STR23.svg a 21.2,21.2 0 0,0 -30,0 (-15,-6.2) 180°
-45°/315° to 45° ↗→↘ BSicon STR23.svg a 21.2,21.2 0 0,1 30,0 (15,-6.2)
-45°/315° to -135°/225° ↗↑↖ BSicon STR3+4.svg a 21.2,21.2 0 0,0 0,-30 (6.2,-15) -90°/270°
  • Radius r and destination x or y of a 90° ordinal direction to ordinal direction circular arc is a very straightforward Pythagorean relation:

r = \sqrt{ x^2 / 2 }

x = \sqrt{2 \left ( r^2 \right )}

Parallel shift[edit]

Cubic Bézier curve[3]
Angle from/to Path data Mid. position
Cardinal direction shift
0° to 45° to 0° →↘→ BSicon SHI2rq-.svg c 10,0 10,10 20,10 (10,5)
q 5,0 10,5 t 10,5
0° to -45° to 0° →↗→ BSicon -SHI2lq.svg c 10,0 10,-10 20,-10 (10,-5)
90° to 135° to 90° ↓↙↓ BSicon v-SHI2r.svg c 0,10 -10,10 -10,20 (-5,10)
90° to 45° to 90° ↓↘↓ BSicon vSHI2l-.svg c 0,10 10,10 10,20 (5,10)
180° to 225° to 180° ←↖← BSicon SHI2rq-.svg c -10,0 -10,-10 -20,-10 (-10,-5)
180° to 135° to 180° ←↙← BSicon -SHI2lq.svg c -10,0 -10,10 -20,10 (-10,5)
-90° to -45° to -90° ↑↗↑ BSicon v-SHI2r.svg c 0,-10 10,-10 10,-20 (5,-10)
-90° to 225° to -90° ↑↖↑ BSicon vSHI2l-.svg c 0,-10 -10,-10 -10,-20 (-5,-10)
Ordinal direction shift
45° to 90° to 45° ↘↓↘ BSicon dSTR2+4.svg c 8,8 2,12 10,20 (5,10)
q 4,4 5,10 t 5,10
45° to 0° to 45° ↘→↘ c 8,8 12,2 20,10 (10,5)
135° to 180° to 135° ↙←↙ c -8,8 -12,2 -20,10 (-10,5)
135° to 90° to 135° ↙↓↙ c -8,8 -2,12 -10,20 (-5,10)
225° to -90° to 225° ↖↑↖ c -8,-8 -2,-12 -10,-20 (-5,-10)
225° to 180° to 225° ↖←↖ c -8,-8 -12,-2 -20,-10 (-10,-5)
-45° to 0° to -45° ↗→↗ c 8,-8 12,-2 20,-10 (10,-5)
-45° to -90° to -45° ↗↑↗ BSicon dSTR3+1.svg c 8,-8 12,-2 20,-10 (5,-10)

135°[edit]

Elliptical arc
Cardinal direction to ordinal direction
Angle from/to Path data +90° position +90° rotation
0° to 135° CW →↘↓↙ BSicon STR3+r.svg a 20,20 0 0,1 14,34 (20,20) 90°
0° to -135° CCW →↗↑↖ BSicon STRr+4.svg a 20,20 0 0,0 14,-34 (20,-20) -90°
90° to 225° CW ↓↙←↖ BSicon STR4.svg a 20,20 0 0,1 -34,14 (-20,20) 180°
90° to -45° CCW ↓↘→↗ BSicon STR1.svg a 20,20 0 0,0 34,14 (20,20)
180° to 315° CW ←↖↑↗ BSicon STRl+1.svg a 20,20 0 0,1 -14,-34 (-20,-20) 270°
180° to 45° CCW ←↙↓↘ BSicon STR2+l.svg a 20,20 0 0,0 -14,34 (-20,20) 90°
-90° to 45° CW ↑↗→↘ BSicon STR+2.svg a 20,20 0 0,1 34,-14 (20,-20)
-90° to 135° CCW ↑↖←↙ BSicon STR+3.svg a 20,20 0 0,0 -34,-14 (-20,-20) 180°
Ordinal direction to cardinal direction
Angle from/to Path data +45° position +45° rotation
45° to 180° CW ↘↓↙← BSicon STRr+4.svg a 20,20 0 0,1 -14,34 (6,14) 90°
45° to -90° CCW ↘→↗↑ BSicon STR4.svg a 20,20 0 0,0 34,-14 (14,6)
135° to 180° CW ↙←↖↑ BSicon STR1.svg a 20,20 0 0,1 -34,-14 (-14,6) 180°
135° to -90° CCW ↙↓↘→ BSicon STRl+1.svg a 20,20 0 0,0 14,34 (-6,14) 90°
225° to 180° CW ↖↑↗→ BSicon STR2+l.svg a 20,20 0 0,1 14,-34 (-6,-14) -90°
225° to -90° CCW ↖←↙↓ BSicon STR+2.svg a 20,20 0 0,0 -34,14 (-14,-6) 180°
-45° to 180° CW ↗→↘↓ BSicon STR+3.svg a 20,20 0 0,1 34,14 (14,-6)
-45° to -90° CCW ↗↑↖← BSicon STR3+r.svg a 20,20 0 0,0 -14,-34 (6,-14) -90°
  • Plus 0.142 to the coordinates of the destinations if you must be accurate.

26.565°[edit]

Because tan 26.565°=0.5, meaning x:y=2:1 on the straight slope.

Angle from/to (θ) Path data Control point of Q Radius (r) Curve destination
Cardinal direction to diagonal direction
0° to 26.565° →↘ BSicon STR2+r.svg a 38,38 0 0,1 17,4 \frac { \sqrt{x^2+y^2} } { 2 \sin \frac {\theta} {2} } (n(\sqrt{5}+2),n)
q 9,0 17,4 (n\sqrt{5},0)
0° to -26.565° →↗ BSicon STRr+1.svg q 9,0 17,-4
90° to (90°-63.435°) ↓↘ BSicon KRWl.svg a 22,22 0 0,0 12,20 \sqrt { (\frac {n}{2}) ^2 + n^2} ( r - \frac {n} {2},n)
q 0,14 12,20 (0, r \times tan \frac {\theta}{2})
90° to (90°+63.435°) ↓↙ BSicon KRWr.svg q 0,14 -12,20
Diagonal direction to cardinal direction
26.565° to 0° ↘→ BSicon STRl+4.svg q 8,4 17,4
a 38,38 0 0,0 17,4
26.565° to 90° ↘↓ BSicon KRW+r.svg q 12,6 12,20
a 22,22 0 0,1 12,20

3:4:5 Pythagorean triple[edit]

3^2+4^2=5^2

\tan^{-1}\frac{3}{4}=36.8698976^\circ

90 - 36.8698976 = 53.1301024

36.87°[edit]

Angle from/to (θ) Path data Control point of Q Radius (r) Curve destination
Cardinal direction to diagonal direction
0° to 37° →↘ BSicon STR2+r.svg q 15,0 27,9 (5n,0) (9n,3n) / (3n,n)
a 45,45 0 0,1 27,9 15n / 5n
q 13.33,0 24,8
a 40,40 0 0,1 24,8
90° to 37° ↓↘ BSicon KRWl.svg q 0,20 16,32 (0,5n) (4n,8n) / (2n,4n)
a 40,40 0 0,0 16,32 10n / 5n
0° to (90°+53°) →↘↓↙ BSicon STR3+r.svg a 50,50 0 0,1 30,90 5n (3n,9n)
a 40,40 0 0,1 24,72
90° to -37° ↓↘→↗ BSicon STR1.svg a 50,50 0 0,0 80,40 (8n,4n)
a 40,40 0 0,0 64,32
Diagonal direction to cardinal direction
37° to 0° ↘→ BSicon STRl+4.svg q 12,9 27,9 (4n,3n) (9n,3n) / (3n,n)
a 45,45 0 0,0 27,9 15n / 5n
q 10.67,9 24,8
a 40,40 0 0,0 24,8
37° to 90° ↘↓ BSicon KRW+r.svg q 16,12 16,32 (4n,3n) (4n,8n) / (2n,4n)
a 40,40 0 0,1 16,32 10n / 5n
37° to -90° ↘→↗↑ BSicon STR4.svg a 50,50 0 0,0 80,-40 5n (8n,-4n)
a 40,40 0 0,0 64,-32
37° to 180° ↘↓↙← BSicon STRr+4.svg a 50,50 0 0,1 -30,90 (-3n,9n)
a 40,40 0 0,1 -24,72
Diagonal direction to diagonal direction
37° to -37° ↘→↗ a 40,40 0 0,0 48,0 5n (6n,0)
37° to (90°+53°) ↘↓↙ a 40,40 0 0,1 0,64 (0,8n)
U-turn
37° to (180°+37°) ↘↓↙←↖ a 40,40 0 0,1 -48,64 5n (-6n,8n)
37° to (-90°-53°) ↘→↗↑↖ a 40,40 0 0,0 48,-64 5n (6n,-8n)
Great loop
0° to (180°+37°) →↘↓↙←↖ a 40,40 0 1,1 -24,72 5n (-3n,9n)
37° to 180° ↘→↗↑↖← a 40,40 0 1,0 24,-72 (3n,-9n)

53.13°[edit]

Angle from/to (θ) Path data Control point of Q Radius (r) Curve destination
Cardinal direction to diagonal direction
0° to 53° →↘ BSicon STR2+r.svg q 20,0 32,16 (5n,0) (8n,4n) / (4n,2n)
a 40,40 0 0,1 32,16 10n / 5n
90° to 53° ↓↘ BSicon KRWl.svg q 0,15 9,27 (0,5n) (3n,9n) / (n,3n)
a 45,45 0 0,0 9,27 15n / 5n
q 0,13.33 8,24
a 40,40 0 0,0 8,24
0° to (90°+37°) →↘↓↙ BSicon STR3+r.svg a 50,50 0 0,1 40,80 5n (4n,8n)
a 40,40 0 0,1 32,64
90° to -53° ↓↘→↗ BSicon STR1.svg a 50,50 0 0,0 90,30 (9n,3n)
a 40,40 0 0,0 72,24
Diagonal direction to cardinal direction
53° to 0° ↘→ BSicon STRl+4.svg q 12,16 32,16 (3n,4n) (8n,4n) / (4n,2n)
a 40,40 0 0,0 32,16 10n / 5n
53° to 90° ↘↓ BSicon KRW+r.svg q 9,12 9,27 (3n,4n) (3n,9n) / (n,3n)
a 45,45 0 0,1 9,27 15n / 5n
q 8,10.67 8,24
a 40,40 0 0,1 8,24
53° to -90° ↘→↗↑ BSicon STR4.svg a 50,50 0 0,0 90,-30 5n (9n,-3n)
a 40,40 0 0,0 72,-24
53° to 180° ↘↓↙← BSicon STRr+4.svg a 50,50 0 0,1 -40,80 (-4n,8n)
a 40,40 0 0,1 -32,-64
Diagonal direction to diagonal direction
53° to -53° ↘→↗ a 40,40 0 0,0 64,0 5n (8n,0)
53° to (90°+37°) ↘↓↙ a 40,40 0 0,1 0,48 (0,6n)
U-turn
53° to (180°+53°) ↘↓↙←↖ a 40,40 0 0,1 -64,48 5n (-8n,6n)
53° to (-90°-37°) ↘→↗↑↖ a 40,40 0 0,0 64,-48 5n (8n,-6n)

37° to/from 53°[edit]

Angle from/to (θ) Path data Radius (r) Curve destination
37° to (90°+37°) ↘↓↙ BSicon STR3+4.svg a 40,40 0 0,1 8,56 5n (n,7n)
53° to (90°+53°) a 40,40 0 0,1 -8,56 (-n,7n)
37° to -53° ↘→↗ BSicon STR14.svg a 40,40 0 0,0 56,-8 (7n,-n)
53° to -37° a 40,40 0 0,0 56,8 (7n,n)

Changing curve radius without messing with the entry and exit paths[edit]

If you end up with more irrational numbers or repeating decimals in the resultant path data, it may be better to redo the path from scratch...

Example 1[edit]

Original path data of a 37° clockwise kink from a horizontal path:

M 0,0 H 100 a 40,40 0 0,1 24,8 L 164,38
  • Find out the intersection (control point of quadratic Bézier curve) of the entry and exit paths before the curve kinks in:
∵ Radius : xcontrol point = 15 : 5 = 3 : 1
xcontrol point = Radius / 3 = 40 / 3 = 13.3
  • Multiply the curve radius, curve destination and control point:
Radius = 40 * 1.5 = 60
Curve destination = (24,8) * 1.5 = (36,12)
xcontrol point = 13.3 * 1.5 = 20
  • Calculate the new entry coordinate(s) of the curve:
100 + 13.3 - 20 = 93.3 ≈ 93.33

New path data:

M 0,0 H 93.33 a 60,60 0 0,1 36,12 L 164,38

Path stroke with parallel stripe pattern[edit]

<defs>
<path id="path" fill="none" d="M 50,50 h 100 a 150,150 0 0,1 150,150 a 50,50 0 1,0 50,-50"/>
</defs>
<use xlink:href="#path" style="stroke:white;stroke-width:28"/>
<use xlink:href="#path" style="stroke:#444;stroke-width:23"/>
<use xlink:href="#path" style="stroke:white;stroke-width:18"/>
<use xlink:href="#path" style="stroke:#444;stroke-width:13"/>
<use xlink:href="#path" style="stroke:white;stroke-width:8"/>
<use xlink:href="#path" style="stroke:#444;stroke-width:3"/>

Aligning object on circular path[edit]

When aligning object alongside a perfectly circular path, the transform property is useful to eliminate guesswork by eye. Note that this method does not work on elliptical path. The procedure is to position the object to the center of the circle, then rotate the object to the desirable angle, finally "shoot" the object to the circumference by the radius of the circle:

<use xlink:href="#whatever" transform="translate(250,250)rotate(110)translate(50)"/>

The order of all translate and rotate values is not arbitrary and must be followed exactly for this alignment to work.

So in this case, the center of the circle is at (250,250), the radius is 50 px wide and the object is at 110° from north of the center. However, if your object is not omnidirectional and you want it to face a specific direction at its final position, there are 2 workarounds to achieve that. (a) You can add one last rotation at the end of the transform property, e.g. 20°:

<use xlink:href="#whatever" transform="translate(250,250)rotate(110)translate(50)rotate(20)"/>

If you only want to rotate the object back to its original direction, use the negative value of the first rotation:

<use xlink:href="#whatever" transform="translate(250,250)rotate(110)translate(50)rotate(-110)"/>

or (b) if you just want the object to turn 180°, change the initial rotation ±180° and the second translate of x, the radius, from positive value to negative, or vice versa:

<use xlink:href="#whatever" transform="translate(250,250)rotate(290)translate(-50)"/>

You can of course group the objects if they share the same center of the circular path or even the first rotation if they are at the same direction. Use the g element wisely to reduce the code size:

<g transform="translate(250,250)">
	<use xlink:href="#whatever" transform="rotate(110)translate(50,0)"/>
	<g transform="rotate(50)">
		<use xlink:href="#whatever" transform="translate(50)"/>
		<use xlink:href="#whatever" transform="translate(55)rotate(-50)"/>
		<use xlink:href="#whatever" transform="translate(60)rotate(20)"/>
	</g>
	<use xlink:href="#whatever" transform="rotate(290)translate(-50)"/>
</g>
  • When there is only 1 value for translate, the value is treated as x and zero for y. In the above examples, this means 0° is pointing to east.

Absolute position after transformation:

x = xcentre + radius * cos θ

y = ycentre - radius * sin θ

  • Applicable if 0° is pointing to east. If 0° is north then x will be calculated with sine and y with cosine.
  • The formula of y is negative because y-axis of the SVG coordinate system is inverse of the convention.

SVG animation[edit]

General
  • Firefox: Most compatible/forgiving.
  • Chrome: Stricter format of animation "value". Excessive space or new line may disable the animation.
  • Safari: Animation of elliptical arc command is not allowed.
  • IE: What is that? Something edible?
Multiple usages of the same animated object
  • Firefox: Each usage is treated independently from other usage.
  • Chrome: All usages share the same "begin" and "end" trigger.

Animation of lunar phases with constant wag and blurred shade boundary[edit]

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30">
	<defs>
		<filter id="MyFilter" filterUnits="userSpaceOnUse" x="-20" y="-20" width="40" height="40">
			<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
		</filter>
	</defs>
	<rect x="-10" y="-10" width="70" height="70" fill="#000"/>
	<g transform="translate(15,15)rotate(35)">
<!--Add scale modifier at the end of transform value if you want to enlarge the whole moon. The initial size is quite small.-->
		<clipPath id="moon_clip">
			<path d="M 0,-11 a 11,11 0 0,1 0,22 a 11,11 0 0,1 0,-22"/>
		</clipPath>
		<g clip-path="url(#moon_clip)">
			<circle cx="0" cy="0" r="11" fill="#222" stroke="none"/>
			<g filter="url(#MyFilter)">
				<path id="moon" style="stroke:none;fill:#fff" d="M 0,-11 a 11,11 0 0,1 0,22 a 5,11 0 0,0 0,-22">
<!--Default shape of the new moon also in case of incompatibility of SVG/SMIL animation.-->
					<animate attributeType="XML" attributeName="d" fill="remove" repeatCount="indefinite"
					begin="0s" dur="5s" calcMode="spline" keySplines="0.25,0 0.5,0.5; 0.5,0.5 0.75,1" values="
					M 0,-11 c 6.04,0 11,5 11,11 c 0,6.04 -5,11 -11,11 c 6.04,0 11,-5 11,-11 c 0,-6.04 -5,-11 -11,-11;
					M 0,-11 c 6.04,0 11,5 11,11 c 0,6.04 -5,11 -11,11 c -6.04,0 -11,-5 -11,-11 c 0,-6.04 5,-11 11,-11;
					M 0,-11 c -6.04,0 -11,5 -11,11 c 0,6.04 5,11 11,11 c -6.04,0 -11,-5 -11,-11 c 0,-6.04 5,-11 11,-11;"
					/>
				</path>
				<path id="lunar_craters" style="fill:#000s;stroke:none;opacity:0.2" transform="translate(-11,-11)" d="
				M 4,3 L 2,4 4,2 10,3 13,6 9,9 6,10 7,16 1,13 -0.5,5
				M 13,7 L 14,6 16,6 20,11 17,14
				M 17,7 L 19,6 20,7 19,9
				"/>
<!--This is a very rough trailing of the lunar craters. You can make the path more defined and/or add more details. Just remember to share the style across all craters shapes.-->
			</g>
			<animateTransform attributeType="XML" attributeName="transform" type="rotate" fill="remove" repeatCount="indefinite" additive="sum"
			begin="0s" dur="6s" calcMode="spline" keySplines="0.5,0 0.5,1; 0.5,0 0.5,1" values="0; -70; 0"/>
		</g>
	</g>
</svg>