circle - Circle Element

You probably guest it. The <circle> element allows you to draw, well a circle. 

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

     <circle cx="25" cy="75" r="20"/>

</svg>

The circle element's three main attributes are:

  • r The radius of the circle
  • cx The x position
  • cy the y position

Of course the <cirle> element can be styled with what you have seen in earlier code examples; stroke, stroke-width and fill. 

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

     <circle cx="25" cy="75" r="60" style="stroke: #4592C5; stroke-width: 10; fill:#529587" />

</svg>