SVG <circle>

SVG Circle - <circle>

The <circle> element is used to create a circle.

The <circle> element has three basic attributes to position and set the size of the circle:

An SVG Circle

The following example creates a circle:

Here is the SVG code:

Code explanation:

• The r attribute defines the radius of the circle
• The cx and cy attributes define the x- and y-axes center of the circle. If they are omitted, the circle's center is set to (0,0)
• The fill attribute defines the color of the circle

An SVG Circle with Border

The following example creates a circle with border:

Here is the SVG code:

Code explanation:

• The stroke attribute defines the color of the border around the circle
• The stroke-width attribute defines the width of the border around the circle

An SVG Circle with Opacity

The following example creates a circle with opacity:

Here is the SVG code:

Code explanation:

• The opacity attribute defines the opacity of the circle