SVG Circles and Ellipses

SVG provides dedicated elements for drawing perfect circles and ellipses: circle and ellipse. Both are simple to use and require just a few attributes.

The `circle` Element

A circle is defined by its center point and its radius. It has three core attributes:

cx: The x-coordinate of the circle's center point.
cy: The y-coordinate of the circle's center point.
r: The radius of the circle (the distance from the center to the edge).

The `ellipse` Element

An ellipse is like a circle that has been stretched in one direction. It is also defined by its center point, but instead of a single radius it has two separate radii (one for each axis):

cx: The x-coordinate of the ellipse's center point.
cy: The y-coordinate of the ellipse's center point.
rx: The horizontal radius (how wide the ellipse extends left and right).
ry: The vertical radius (how tall the ellipse extends up and down).

Note: if you set rx and ry to the same value, you get a perfect circle, just like the circle element.

Basic Circle and Ellipse

Here is a circle and an ellipse drawn together to show the difference:

View Output

Adding Strokes

Just like rectangles, you can apply stroke, stroke-width, and stroke-dasharray to circles and ellipses to add borders and dashed outlines.