How to draw a circle using SVG tag in HTML ?
Last Updated :
15 May, 2023
In this article, you will learn about SVG basic shape like circle which is among the different shapes of SVG like <rect>, <line>, <ellipse>, <polygon>, etc. So you can easily draw circles using <circle> tag whose parent tag is SVG tag in HTML.
Basically, the <circle> element draws a circle on the screen which is done by the 3 basic parameters which include cx, cy, and r, which are briefly demonstrated further in this article.
Syntax:
<circle
cx="x-axis co-ordinate"
cy="y-axis co-ordinate"
r="length" >
</circle>
Attributes: The following attributes & their attribute values are described below:
- cx: x-axis co-ordinate of the center of the circle. The default value is 0.
- cy: y-axis co-ordinate of the center of the circle. The default value is 0.
- r: Radius of the circle.
Note: cx and cy is the x-axis and y-axis co-ordinate which determines the position of the circle and r is the radius of the circle which determines the size of the circle. Circle rendering will be disabled if its radius is zero.
Example 1: In this example, we will see the use of the tag.
HTML
<!DOCTYPE html>
< html >
< body >
< center >
< h1 style = "color:green" >Welcome To GeeksforGeeks</ h1 >
< svg height = "400" width = "400" >
< circle cx = "150" cy = "150" r = "100" stroke = "gray"
stroke-width = "2" fill = "green" />
</ svg >
< svg height = "300" width = "300" >
< circle cx = "150" cy = "150" r = "100" stroke = "green"
stroke-width = "2" fill = "blue" />
</ svg >
</ center >
</ body >
</ html >
|
Output:
Example 2: In this example, we will use svg basics with the tag.
HTML
<!DOCTYPE html>
< html >
< body >
< center >
< h1 style = "color:green" >Welcome To GeeksforGeeks</ h1 >
<!-green circle is towards 80px +ve x-axis
with 64px radius->
< circle cx = "80" cy = "80" r = "64"
stroke = "gray" stroke-width = "2"
fill = "green" fill-opacity = "90%" />
<!-red circle is towards 170px +ve x-axis
with 64px radius->
< circle cx = "170" cy = "80" r = "64"
stroke = "black" stroke-width = "2" fill = "red"
fill-opacity = "70%" />
</ svg >
</ center >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...