Appendix B: Implementation Notes

B.2.1. Elliptical arc endpoint syntax

An elliptical arc, as represented in the SVG path command, is described by the following parameters in order:

(x₁, y₁) are the absolute coordinates of the current point on the path, obtained from the last two parameters of the previous path command.

r_x and r_y are the radii of the ellipse (also known as its semi-major and semi-minor axes).

φ is the angle from the x-axis of the current coordinate system to the x-axis of the ellipse.

f_A is the large arc flag, and is 0 if an arc spanning less than or equal to 180 degrees is chosen, or 1 if an arc spanning greater than 180 degrees is chosen.

f_S is the sweep flag, and is 0 if the line joining center to arc sweeps through decreasing angles, or 1 if it sweeps through increasing angles.

(x₂, y₂) are the absolute coordinates of the final point of the arc.

B.2.2. Parameterization alternatives

An arbitrary point (x, y) on the elliptical arc can be described by the 2-dimensional matrix equation:

    x = rx*cos(θ)*cos(φ) - ry*sin(θ)*sin(φ) + cx
    y = rx*cos(θ)*sin(φ) + ry*sin(θ)*cos(φ) + cy
  

(c_x, c_y) are the coordinates of the center of the ellipse.

r_x and r_y are the radii of the ellipse (also known as its semi-major and semi-minor axes).

If one thinks of an ellipse as a circle that has been stretched and then rotated, then θ₁, θ₂ and Δθ are the start angle, end angle and sweep angle, respectively of the arc prior to the stretch and rotate operations. This leads to an alternate parameterization which is common among graphics APIs, which will be referred to as center parameterization. In the next sections, formulas are given for mapping in both directions between center parameterization and endpoint parameterization.

B.2.3. Conversion from center to endpoint parameterization

Given the following variables:

c_x c_y r_x r_y φ θ₁ Δθ

the task is to find:

x₁ y₁ x₂ y₂ f_A f_S

This can be achieved using the following formulas:

B.2.4. Conversion from endpoint to center parameterization

Given the following variables:

x₁ y₁ x₂ y₂ f_A f_S r_x r_y φ

the task is to find:

c_x c_y θ₁ Δθ

The equations simplify after a translation which places the origin at the midpoint of the line joining (x₁, y₁) to (x₂, y₂), followed by a rotation to line up the coordinate axes with the axes of the ellipse. All transformed coordinates will be written with primes. They are computed as intermediate values on the way toward finding the required center parameterization variables. This procedure consists of the following steps:

• Step 1: Compute (x₁′, y₁′)

  $$\left(\begin{array}{c}{x_{\mathit{1}}}^{\mathit{\prime }}\\ {y_{\mathit{1}}}^{\mathit{\prime }}\end{array}\right)=\left(\begin{array}{cc}\cos \mathit{\phi }& \sin \mathit{\phi }\\ -\sin \mathit{\phi }& \cos \mathit{\phi }\end{array}\right)\cdot \left(\begin{array}{c}\frac{x_{\mathit{1}}\mathit{-}{x}_{\mathit{2}}}{\mathit{2}}\\ \frac{y_{\mathit{1}}\mathit{-}{y}_{\mathit{2}}}{\mathit{2}}\end{array}\right)$$

  (eq. 5.1)

• Step 2: Compute (c_x′, c_y′)

  $$\left(\begin{array}{c}{c_x}^{\prime }\\ {c_y}^{\prime }\end{array}\right)=\pm \sqrt{\frac{{r_x}^2{r_y}^2-{r_x}^2{\left({y_1}^{\prime }\right)}^2-{r_y}^2{\left({x_1}^{\prime }\right)}^2}{{r_x}^2{\left({y_1}^{\prime }\right)}^2+{r_y}^2{\left({x_1}^{\prime }\right)}^2}}\left(\begin{array}{c}\frac{r_x{y_1}^{\prime }}{r_y}\\ -\frac{r_y{x_1}^{\prime }}{r_x}\end{array}\right)$$

  (eq. 5.2)

  where the + sign is chosen if f_A ≠ f_S, and the − sign is chosen if f_A = f_S.

• Step 3: Compute (c_x, c_y) from (c_x′, c_y′)

  $$\left(\begin{array}{c}{c}_x\\ c_y\end{array}\right)=\left(\begin{array}{cc}\cos \mathit{\phi }& -\sin \mathit{\phi }\\ \sin \mathit{\phi }& \cos \mathit{\phi }\end{array}\right)\cdot \left(\begin{array}{c}{c_x}^{\text{'}}\\ {c_y}^{\text{'}}\end{array}\right)+\left(\begin{array}{c}\frac{x_1+x_2}{2}\\ \frac{y_1+y_2}{2}\end{array}\right)$$

  (eq. 5.3)

• Step 4: Compute θ₁ and Δθ

  In general, the angle between two vectors (u_x, u_y) and (v_x, v_y) can be computed as

  $$\angle \left(\begin{array}{ccc}\stackrel{\rightharpoonup }{u}& \mathrm{,}& \stackrel{\rightharpoonup }{v}\end{array}\right)=\pm \arccos \left(\frac{\stackrel{\rightharpoonup }{u}\cdot \stackrel{\rightharpoonup }{v}}{‖\stackrel{\rightharpoonup }{u}‖ ‖\stackrel{\rightharpoonup }{v}‖}\right)$$

  (eq. 5.4)

  where the ± sign appearing here is the sign of u_x v_y − u_y v_x.

  This angle function can be used to express θ₁ and Δθ as follows:

  $${\mathit{\theta }}_1=\angle \left(\begin{array}{ccc}\left(\begin{array}{c}1\\ 0\end{array}\right)& \mathit{,}& \left(\begin{array}{c}\frac{{x_{\mathit{1}}}^{\prime }-{c_x}^{\prime }}{r_x}\\ \frac{{y_{\mathit{1}}}^{\prime }-{c_y}^{\prime }}{r_y}\end{array}\right)\end{array}\right)$$

  (eq. 5.5)

  $$\Delta \mathit{\theta }\equiv \angle \left(\begin{array}{ccc}\left(\begin{array}{c}\frac{{x_{\mathit{1}}}^{\prime }-{c_x}^{\prime }}{r_x}\\ \frac{{y_{\mathit{1}}}^{\prime }-{c_y}^{\prime }}{r_y}\end{array}\right)& \mathit{,}& \left(\begin{array}{c}\frac{{-x_{\mathit{1}}}^{\prime }-{c_x}^{\prime }}{r_x}\\ \frac{{-y_{\mathit{1}}}^{\prime }-{c_y}^{\prime }}{r_y}\end{array}\right)\end{array}\right)\mathit{ }\mathrm{mod\; 360}°$$

  (eq. 5.6)

  where Δθ is fixed in the range −360° < Δθ < 360° such that:

  if f_S = 0, then Δθ < 0,

  else if f_S = 1, then Δθ > 0.

  In other words, if f_S = 0 and the right side of (eq. 5.6) is greater than 0, then subtract 360°, whereas if f_S = 1 and the right side of (eq. 5.6) is less than 0, then add 360°. In all other cases leave it as is.

B.2.5. Correction of out-of-range radii

This section describes the mathematical adjustments required for out-of-range r_x and r_y, as described in the Path implementation notes. Algorithmically these adjustments consist of the following steps:

• Step 1: Ensure radii are non-zero

  If r_x = 0 or r_y = 0, then treat this as a straight line from (x₁, y₁) to (x₂, y₂) and stop. Otherwise,

• Step 2: Ensure radii are positive

  Take the absolute value of r_x and r_y:

  $$\begin{array}{l}{r}_y\leftarrow \left|r_y\right|\\ \\ r_y\leftarrow \left|r_y\right|\end{array}$$

  (eq. 6.1)

• Step 3: Ensure radii are large enough

  Using the primed coordinate values of equation (eq. 5.1), compute

  $$\mathit{\Lambda }=\frac{{\left({x_{\mathit{1}}}^{\prime }\right)}^{\mathit{2}}}{{r_x}^{\mathit{2}}}+\frac{{\left({y_{\mathit{1}}}^{\prime }\right)}^{\mathit{2}}}{{r_y}^{\mathit{2}}}$$

  (eq. 6.2)

  If the result of the above equation is less than or equal to 1, then no further change need be made to r_x and r_y. If the result of the above equation is greater than 1, then make the replacements

  $$\begin{array}{l}{r}_x\leftarrow \sqrt{\mathit{\Lambda }}\mathit{ }{r}_x\\ \\ r_y\leftarrow \sqrt{\mathit{\Lambda }}\mathit{ }{r}_y\end{array}$$

  (eq. 6.3)

• Step 4: Proceed with computations

  Proceed with the remaining elliptical arc computations, such as those in the Conversion from endpoint to center parameterization algorithm. Note: As a consequence of the radii corrections in this section, the equation (5.2) for the center of the ellipse always has at least one solution (i.e. the radicand is never negative). In the case that the radii are scaled up using equation (eq. 6.3), the radicand of (eq. 5.2) is zero and there is exactly one solution for the center of the ellipse.