User:Sameboat

Wikimedia Commons: Sum of All Human Silliness

• Category:User Sameboat temporary documents

About me

• Nationality: China
• Birth Place: Hong Kong
• Ethnicity: Han
• Birth year: 1983
• Native language: Cantonese
• Other handy language: English, Mandarin
• Studying language: Russian
• Barely understanding language: Japanese
• Occupation: Audio engineer (albeit low-end)

Useful curves for SVG topological graph or map

• The origin (0,0) is located at the upper-left corner of the image.
• 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.
• There is a good reason (actually many) you should not rely solely on Inkscape to draw non-freehand image like topological graph. If you are editing the curve with its 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. You should understand the SVG commands yourself.

45°

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°	→↘		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 14,0 14,0 24,10	(13.5,1.2)
0° to -45°/315°	→↗		q 14,0 24,-10	(13,-2.6)	-22.5°/337.5°
90° to 135°	↓↙		q 0,14 -10,24	(-2.6,13)	112.5°
90° to 45°	↓↘		q 0,14 10,24	(2.6,13)	67.5°
180° to -135°/225°	←↖		q -14,0 -24,-10	(-13,-2.6)	-157.5°/202.5°
180° to 135°	←↙		q -14,0 -24,10	(-13,2.6)	157.5°
-90/270° to -45°/315°	↑↗		q 0,-14 10,-24	(2.6,-13)	-67.5°/292.5°
-90/270° to -135°/225°	↑↖		q 0,-14 -10,-24	(-2.5,-12.9)	-112.5°/247.5°
Ordinal direction to cardinal direction
45° to 90°	↘↓		q 10,10 10,24	(7.4,11)	67.5°
45° to 0°	↘→		q 10,10 24,10	(11,7.4)	22.5°
135° to 180°	←↙		q -10,10 -24,10	(-11,7.4)	157.5°
135° to 90°	↙↓		q -10,10 -10,24	(-7.4,11)	112.5°
-45°/315° to 0°	↗→		q 10,-10 24,-10	(11,-7.4)	-22.5°/337.5°
-45°/315° to -90°/270°	↗↑		q 10,-10 10,-24	(7.54,-11)	-67.5°/292.5°
-135°/225° to -90°/270°	↖↑		q -10,-10 -10,-24	(-7.4,-11)	-112.5°/247.5°
-135°/225° to 180°	↖←		q -10,-10 -24,-10	(-11,-7.4)	-157.5°/202.5°

• The coordinates of the anchor and destination are found with simple Pythagorean theorem. The x of the anchor in the 1st example should be accurately:

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

• If using elliptical arc command (A/a) to draw the 45° curve, when the coordinates of the destination, x and y, and the angle $\theta$, 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.

90°

About SVG elliptical arc (A/a) parameters:

• 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. It is meaningless to give either of them negative value 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.
• 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 cirlc/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°	→↘↓		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°	→↗↑		a 30,30 0 0,0 30,-30	(21.2,-8.8)	-45°/315°
90° to 180°	↓↙←		a 30,30 0 0,1 -30,30	(-8.8,21.2)	135°
90° to 0°	↓↘→		a 30,30 0 0,0 30,30	(8.8,21.2)	45°
180° to -90°/270°	←↖↑		a 30,30 0 0,1 -30,-30	(-8.8,-21.2)	-135°/225°
180° to 90°	←↙↓		a 30,30 0 0,0 -30,30	(-21.2,8.8)	135°
-90°/270° to 0°	↑↗→		a 30,30 0 0,1 30,-30	(8.8,-21.2)	-45°/315°
-90°/270° to 180°	↑↖←		a 30,30 0 0,0 -30,-30	(-8.8,-21.2)	-135°/225°
Ordinal direction to ordinal direction
45° to 135°	↘↓↙		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°	↘→↗		a 21.2,21.2 0 0,0 30,0	(15,6.2)	0°
135° to -135°/225°	↙←↖		a 21.2,21.2 0 0,1 -30,0	(-15,6.2)	180°
135° to 45°	↙↓↘		a 21.2,21.2 0 0,0 0,30	(-6.2,15)	90°
-135°/225° to -45°/315°	↖↑↗		a 21.2,21.2 0 0,1 0,-30	(-6.2,-15)	-90°/270°
-135°/225° to 135°	↖←↙		a 21.2,21.2 0 0,0 -30,0	(-15,-6.2)	180°
-45°/315° to 45°	↗→↘		a 21.2,21.2 0 0,1 30,0	(15,-6.2)	0°
-45°/315° to -135°/225°	↗↑↖		a 21.2,21.2 0 0,0 0,-30	(6.2,-15)	-90°/270°

Parallel shift

Cubic Bézier curve[3]

Angle from/to			Path data	Mid. position
Cardinal direction shift
0° to 45° to 0°	→↘→		c 10,0 10,10 20,10	(10,5)
			q 5,0 10,5 t 10,5
0° to -45° to 0°	→↗→		c 10,0 10,-10 20,-10	(10,-5)
90° to 135° to 90°	↓↙↓		c 0,10 -10,10 -10,20	(-5,10)
90° to 45° to 90°	↓↘↓		c 0,10 10,10 10,20	(5,10)
180° to 225° to 180°	←↖←		c -10,0 -10,-10 -20,-10	(-10,-5)
180° to 135° to 180°	←↙←		c -10,0 -10,10 -20,10	(-10,5)
-90° to -45° to -90°	↑↗↑		c 0,-10 10,-10 10,-20	(5,-10)
-90° to 225° to -90°	↑↖↑		c 0,-10 -10,-10 -10,-20	(-5,-10)
Ordinal direction shift
45° to 90° to 45°	↘↓↘		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°	↗↑↗		c 8,-8 12,-2 20,-10	(5,-10)

135°

Elliptical arc

Cardinal direction to ordinal direction
Angle from/to		Path data	+90° position	+90° rotation
0° to 135° CW	→↘↓↙	a 20,20 0 0,1 14,34	(20,20)	90°
0° to -135° CCW	→↗↑↖	a 20,20 0 0,0 14,-34	(20,-20)	-90°
90° to 225° CW	↓↙←↖	a 20,20 0 0,1 -34,14	(-20,20)	180°
90° to -45° CCW	↓↘→↗	a 20,20 0 0,0 34,14	(20,20)	0°
180° to 315° CW	←↖↑↗	a 20,20 0 0,1 -14,-34	(-20,-20)	270°
180° to 45° CCW	←↙↓↘	a 20,20 0 0,0 -14,34	(-20,20)	90°
-90° to 45° CW	↑↗→↘	a 20,20 0 0,1 34,-14	(20,-20)	0°
-90° to 135° CCW	↑↖←↙	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	↘↓↙←	a 20,20 0 0,1 -14,34	(6,14)	90°
45° to -90° CCW	↘→↗↑	a 20,20 0 0,0 34,-14	(14,6)	0°
135° to 180° CW	↙←↖↑	a 20,20 0 0,1 -34,-14	(-14,6)	180°
135° to -90° CCW	↙↓↘→	a 20,20 0 0,0 14,34	(-6,14)	90°
225° to 180° CW	↖↑↗→	a 20,20 0 0,1 14,-34	(-6,-14)	-90°
225° to -90° CCW	↖←↙↓	a 20,20 0 0,0 -34,14	(-14,-6)	180°
-45° to 180° CW	↗→↘↓	a 20,20 0 0,1 34,14	(14,-6)	0°
-45° to -90° CCW	↗↑↖←	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.