SVG Circle
Last Updated :
01 Dec, 2023
SVG Circle facilitates the <circle> element which can be utilized to create a circle. Basically, the  <circle> element wrapped inside the <svg> element.
Syntax
<svg>
<circle cx="10"
cy="10"
r="30"
stroke="black"
stroke-width="3"
fill="red" />
</svg>
Attributes
The below are the attributes that can be used with the <svg> element
- cx: It defines the x-coordinate of the center of the circle.
- cy: It defines the y-coordinate of the center of the circle.
- r: It defines the radius of the circle.
- fill: It specifies the color used to fill the circle (in this case, yellow).
- stroke-width: It defines the width of the stroke (outline) of the circle.
- stroke: It specifies the color of the stroke.
- Default Behavior: If no fill parameter is used, the circle is filled with a default color (generally black).
Example 1: In this example, we will implement code to see the SVG circle with the the help of above attributes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>SVG to HTML</title>
<link rel="stylesheet"
href="style.css">
</head>
<body>
<div style="display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height:100vh;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<p style="font-size: 20px">
SVG Circle
</p>
<svg width="200"
height="200"
style="border: 2px solid black;">
<circle cx="95"
cy="95"
r="70"
stroke="green"
stroke-width="5"
fill="yellowgreen" />
</svg>
</div>
<script src="script.js"></script>
</body>
</html>
|
Output:
Output
Example 2: In this example, we will show an SVG circle in HTML with the help of JavaScript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>SVG to HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div style="display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height:100vh;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<p style="font-size: 20px">
SVG Circle
</p>
<svg width="200"
height="200"
style="border: 2px solid black;">
<circle cx="95"
cy="95"
r="70"
stroke="blue"
stroke-width="5" />
</svg>
</div>
<script src="script.js"></script>
</body>
</html>
|
Output:
Â
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...