SVG Circle

SVG Element

The SVG Element

The <circle> element is used to draw a circle. It’s one of the basic SVG shapes and is defined by its center point and radius.

Here’s a simple example of a red circle with a black outline:

Sorry, your browser does not support inline SVG.

And here is the SVG code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Circle Example</title>
</head>
<body>
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>
</body>
</html>

Code Explanation:

• cx: Defines the x-coordinate of the center of the circle. If omitted, it defaults to 0.
• cy: Defines the y-coordinate of the center of the circle. If omitted, it defaults to 0.
• r: Defines the radius of the circle. This attribute is required, and a value less than or equal to zero disables rendering of the circle.
• stroke: Defines the color of the circle’s outline (e.g., “black”).
• stroke-width: Defines the thickness of the circle’s outline (e.g., “3”).
• fill: Defines the color inside the circle (e.g., “red”). If not specified, the fill is typically black by default, or transparent if ‘none’ is specified.

Application: Circles are fundamental in many designs, used for dots, buttons, icons, or as parts of more complex illustrations like charts or diagrams.

Styling Tip: You can also style SVG elements using CSS. For example, you could define styles in a <style> block or an external stylesheet and apply them using classes or IDs.