Drawing a Circle

The circle is drawn using the circle tag. Code example:

<circle r="50"/>

The r attribute determines the radius of the circle.

Unlike the previous shapes we covered, the position of the circle in space is determined by the coordinates of the center of the shape: the cx attribute is used to set the position along the horizontal axis, and cy is used to set the position along the vertical axis.

By default, the circle’s center coordinates are 0.0, so it is located in the upper left corner. Move the shape:

<circle r="50" cx="100" cy="50%"/>

Values can be specified either using pixels or percentages. Percentages are calculated relative to the dimensions of the SVG element.

The radius and coordinates can only be specified using attributes, and you cannot do this using CSS.