drawing a basic svg circle in html

It's really easy to draw a circle in SVG. The code above is a basic example of a 100x100 circle. The cx and the cy is where you want to draw the circle. If those are omitted, the circle will be drawn at 0,0.

Next, you want to specify the r radius. Above you can see it is set to 40. This is because we have a stroke width and we don't want it to sit outside the *100x100 container.

Here is a basic circle without the stroke (notice the r is set to 50):

<svg height="100" width="100">
  <circle cx="50" cy="50" r="50" />
</svg>