O'Reilly logo

SVG Essentials by J. David Eisenberg

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Technique: Converting from Other Arc Formats

Some other vector graphics systems let you specify an arc by defining a center point for the ellipse, its x- and y-radius, the starting angle, and the extent of the angle’s arc. This is a straightforward method of specification, and is excellent for drawing arcs as single objects. This, paradoxically, is exactly why SVG instead chooses such a seemingly eccentric method to specify arcs. In SVG, an arc is not presumed to be living in lonely splendor; it is intended to be part of a connected path of lines and curves. (For example, a rounded rectangle is precisely that — a series of lines and elliptical arcs.) Thus, it makes sense to specify an arc by its endpoints.

Sometimes, though, you do want an isolated semicircle (or, more accurately, semi-ellipse). Presume that you have an ellipse specified as:

<ellipse cx="cx" cy="cy" rx="rx" ry="ry"/>

Here are the paths to draw the four possible semi-ellipses:

<!-- northern hemisphere -->
<path d="M cx-rx 
            cy A rx 
            ry 0 1 1 cx+rx 
            cy"/>
<!-- southern hemipshere -->
<path d="M cx-rx 
            cy A rx 
            ry 0 1 0 cx+rx 
            cy"/>
<!-- eastern hemisphere -->
<path d="M cx 
            cy-ry A rx 
            ry 0 1 1 cx 
            cy+ry"/>
<!-- western hemisphere -->
<path d="M cx 
            cy-ry A rx 
            ry 0 1 0 cx 
            cy+ry"/>

For the more general case, when you wish to draw an arbitrary arc that has been specified in “center-and-angles” notation and wish to convert it to SVG’s “endpoint-and-sweep” format, use the following Perl script. It prompts you for center coordinates, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required