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:
Â
Share your thoughts in the comments
Please Login to comment...