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>
- 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)
- r → r is the radius of the circle
- stroke-width → width of the circle border
- stroke → The color of the circle border
- 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
Browser Support
| Internet Explorer | Firefox | Chrome | Safari | Opera | Edge |
|---|
| 9.0 | 3.0 | 4.0 | 3.2 | 10.1 | Yes |
Video