SVG 'circle' element

The SVG <circle> element draws a circle based on a centre point and a radius. The <circle> element has the following attributes:

  • cx and cy attributes define respectively x- and y-axis coordinates of the centre. The default value is '0'.
  • radius attribute sets the radius of a circle. The negative value of the attribute is an error. If you set a value of zero it will disables rendering of a circle.

Here is a simple example:

<circle cx="50" cy="50" r="30" fill="lightblue" stroke="black" stroke-width="2"/>

and the resulting image: