<circle>

The <circle> tag is used to draw circles in an SVG graphic.

It allows you to easily define a circle using essential attributes:

• cx: the x coordinate of the center;
• cy: the y coordinate of the center;
• r: the radius of the circle.

The circle can be styled with attributes like fill (for fill color) or stroke (for border). 😉

Structure and syntax of the <circle> tag

Structure

Here is a simple example of syntax:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="50" fill="blue" />
</svg>

In this example:

• cx="100" positions the center of the circle at 100 pixels on the x axis;
• cy="100" positions the center of the circle at 100 pixels on the y axis;
• r="50" sets the radius of the circle to 50 pixels;
• fill="blue" gives the circle a blue fill color.

Here is the result of this example:

As we can see, this tag is always used with the <svg> tag.

Example

Here is an example of multiple circles with different styles to better understand their functionality:

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="30" fill="red" />
    <circle cx="150" cy="50" r="30" fill="green" stroke="black" stroke-width="2" />
    <circle cx="250" cy="50" r="30" fill="none" stroke="blue" stroke-width="4" />
</svg>

In this example:

• The first circle is red and solid;
• The second circle is green with a black border of 2 pixels;
• The third circle is empty (no fill) with a blue border of 4 pixels.

Here is the result:

Attributes

Here are the main attributes for the <circle> tag:

• cx: x coordinate of the circle's center (default is 0).
• cy: y coordinate of the circle's center (default is 0).
• r: radius of the circle (indispensable value).
• fill: fill color (default is none).
• stroke: border color.
• stroke-width: width of the border.

Best practices

To use this tag effectively, ensure that the values of cx, cy, and r do not exceed the dimensions of the SVG area.

Use the fill and stroke attributes judiciously for better visibility, without making it hard for search engines (especially for visually impaired users!).

You can group multiple circles and other elements in a <g> for simplified manipulation.

Browser compatibility

The <circle> tag is compatible with all modern browsers: