# Appendix F. Converting Arcs to Different Formats

# Converting from Center and Angles to SVG

The following JavaScript code converts an arc specified in center-and-angles format to a form suitable for placing into an SVG `<path>`

:

`/*`

`Convert an elliptical arc based around a central point`

`to an elliptical arc parameterized for SVG.`

`Parameters are:`

`center x coordinate`

`center y coordinate`

`x-radius of ellipse`

`y-radius of ellipse`

`beginning angle of arc in degrees`

`arc extent in degrees`

`x-axis rotation angle in degrees`

`Return value is an array containing:`

`x-coordinate of beginning of arc`

`y-coordinate of beginning of arc`

`x-radius of ellipse`

`y-radius of ellipse`

`x-axis rotation angle in degrees`

`large-arc-flag as defined in SVG specification`

`sweep-flag as defined in SVG specification`

`x-coordinate of endpoint of arc`

`y-coordinate of endpoint of arc`

`*/`

`function`

`centeredToSVG`

`(`

`cx`

`,`

`cy`

`,`

`rx`

`,`

`ry`

`,`

`theta`

`,`

`delta`

`,`

`phi`

`)`

`{`

`var`

`endTheta`

`,`

`phiRad`

`;`

`var`

`x0`

`,`

`y0`

`,`

`x1`

`,`

`y1`

`,`

`largeArc`

`,`

`sweep`

`;`

`/*`

`Convert angles to radians. I need a separate variable for phi as`

`radians, because I must preserve phi in degrees for the`

`return value.`

`*/`

`theta`

`=`

`theta`

`*`

`Math`

`.`

`PI`

`/`

`180.0`

`;`

`endTheta`

`=`

`(`

`theta`

`+`

`delta`

`)`

`*`

`Math`

`.`

`PI`

`/`

`180.0`

`;`

`phiRad`

`=`

`phi`

`*`

`Math`

`.`

`PI`

`/`

`180.0`

`;`

`/*`

`Figure out the coordinates of the beginning and ending points`

`*/`

`x0`

`=`

`cx`

`+`

`Math`

`.`

`cos`

`(`

`phiRad`

`)`

`*`

`rx`

`*`

`Math`

`.`

`cos`

`(`

`theta`

`)`

`+`

`Math`

`.`

`sin`

`(`

`-`

`phiRad`

`)`

`*`

`ry`

`*`

`Math`

`.`

`sin`

`(`

`theta`

`);`

`y0`

`=`

`cy`

`+`

`Math`

`.`

`sin`

`(`

`phiRad`

`)`

`*`

`rx`

`*`

`Math`

`.`

`cos`

`(`

`theta`

`)`

`+`

`Math`

`.`

`cos`

`(`

`phiRad`

`)`

`*`

`ry`

`*`

`Math`

`.`

`sin`

`(`

`theta`

`);`

`x1`

`=`

`cx ...`

Get *SVG Essentials, 2nd Edition* now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.