SVG Circle

Description of the <circle> element

The SVG <circle> element creates circles, based on a center point and a radius. The coordinates of the circle's center are specified by the "cx" and "cy" attributes. And the radius of the circle is specified by the "r" attribute.

Example of the SVG <circle> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="300" width="300">
      <circle cx="150" cy="150" r="100" stroke="grey" stroke-width="5" fill="purple" />
      Sorry, inline SVG isn't supported by your browser.  
    </svg>
  </body>
</html>

Let’s explain the code above:

  • The "cx" and "cy" attributes specify the x and y coordinates of the circle’s center. In the cases where the "cx" and "cy" attributes are omitted, the center of the circle is set to (0,0).
  • The "r" attribute is used to specify the radius of the circle.

Attributes

The SVG <circle> element also supports the Global Attributes and Event Attributes.

Attribute Description
cx The x-axis coordinate of the circle’s center.
cy The y-axis coordinate of the circle’s center.
r The radius of the circle. A value that is lower or equal to zero will disable the rendering of the circle.
pathlength This attribute specifies the total length for the path, in user units.



Do you find this helpful?

Related articles