How to draw a circle using SVG tag in HTML ?
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
HTML
<!DOCTYPE html> < html > < body > < center > < h1 style = "color:green" >Welcome To w3wiki</ 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
HTML
<!DOCTYPE html> < html > < body > < center > < h1 style = "color:green" >Welcome To w3wiki</ h1 > < svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" > <!-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: