Articles → HTML 5 → SVG Circle In Html5

SVG Circle In Html5






Purpose





Syntax


<svg width="" height="">
    <circle cx="" cy="" r="" stroke=" " stroke-width="" fill=" " />
</svg>




  1. cx and cy → These are the X and Y coordinates of the center of the circle. The default value of cx and cy is (0,0)
  2. r → r is the radius of the circle
  3. stroke-width → width of the circle border
  4. stroke → The color of the circle border
  5. fill → color filled inside the circle

Example


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta charset="utf-8" />
      <title></title>
   </head>
   <body>
      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="Yellow" stroke-width="5" fill="green" />
      </svg>
   </body>
</html>

Try It


Output


Picture showing the output of SVG circle in HTML5



Browser Support


Internet ExplorerFirefoxChromeSafariOperaEdge
9.03.04.03.210.1Yes



Video





Posted By  -  Karan Gupta
 
Posted On  -  Tuesday, June 6, 2017

Query/Feedback


Your Email Id
 
Subject
 
Query/FeedbackCharacters remaining 250