To create a circle, you can use the circle
element inside the svg
element in HTML.
TL;DR
<!-- Create circle in SVG -->
<svg>
<circle cx="30" cy="30" r="30" />
</svg>
For example, to make a circle with a 30px
as its radius length, first we can define the circle
element inside the svg
element like this,
<!-- Create circle in SVG -->
<svg>
<circle />
</svg>
But this alone wouldn't show anything on the screen since it doesn't know how to draw the circle on the screen. For that we have to set some attributes on the circle
element like:
- the
cx
attribute, which defines the center of the circle in thex-axis
or the x-coordinate. - the
cy
attribute, which defines the center of the circle in they-axis
or the y-coordinate. - the
r
attribute stands for radius, which defines the length of the radius for the circle to draw.
So it may look like this,
<!-- Create circle in SVG -->
<svg>
<circle cx="30" cy="30" r="30" />
</svg>
So in the end, we will have a circle drawn to the screen like this,
And we have drawn a circle successfully using SVG in HTML. Yay 🎊!
See the above code live in JSBin.
That's all 😃!