Open In App

How to draw a circle using SVG tag in HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

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>
         <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:



Last Updated : 15 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads