Most sources describe how to use the Path element to create an arc. Good luck with that. In this article I explain how to use the Circle element instead. Basically you define a circle with a dash-array stroke. Unfortunately, most sources explain the dash-array incorrectly.
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill-opacity="0" />
Shown above is SVG code for a circle with it's center at x=100, y=100, and a radius of 50. It has a solid border.
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" stroke-dasharray="79,235" fill-opacity="0" />
Shown above is an identical circle, except using the stroke-dasharray attribute to define its border.
The stroke-dasharray attribute is a comma separated list of the lengths of alternating dashes and spaces.
Most sources say the numbers in the stroke-dasharray attribute value are percentages. At least when used in the border of a circle, this is not true. For use in a circle border the border is 314 units long. Does this have any relationship to the value of pi?
In the example above, I specified the first value to be 79. This will be length of the first dash, which ends up creating a 45 degree arc. The second number is the length of the first space. In this case, I want the remainder of the circle to be blank. I'm just creating a 90 degree arc.
Note that the dashed border starts at the Cartesian zero degree point and rotates around in the clockwise direction.
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" stroke-dasharray="0,79,79,156" fill-opacity="0" />
How to create an arc at a different angle? Note in the stroke-dasharray attribute shown above, I specified the total 314 units of the circle border. I specified the first dash to be 0. I specified the first space to be 79 units (90 degrees). I specified the next dash to be 79 units (90 degrees). I specified the last space to be 156 units, taking up the rest of the 314 units.
How to create an arc from 225 degrees to 325 degrees? Again, I specified the first dash to be 0. I specified the first space to be 196 units (225 degrees). I specified the second dash to be 78 units (90 degrees). I specified the second space to be 39 units (45 degrees).
<circle cx="150" cy="70" r="40" stroke="black" stroke-width="2" stroke-dasharray="0,62,62,125" fill-opacity="0" />
The example above shows that this method works for any size circles in any position. The only difference that the number of units changes with the radius of the circle. The number of units of the full border is 2pi x radius, or 6.28 times the radius.
More Graphics Design Tips:
• SVG Code to Translate a Rectangle and Text
• Create Animated Glistening Gold Text With SVG
• SVG Example Code to Scale Elements
• Image Processing Filters - How to Sharpen a Photograph
• SVG Image Clipping
• How to Really Create an Arc in SVG
• SVG For Responsive Web Design
• Building an Image with a Logo
• Inkscape Rectangles and Squares Drawing Tutorial
• Anti-Aliasing