SVG Circle (original) (raw)

Last Updated : 28 Apr, 2025

SVG Circle facilitates the element which can be utilized to create a circle. Basically, the element wrapped inside the

Syntax

Attributes

The below are the attributes that can be used with the

• 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 `

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

`

Output:

Output

Example 2: In this example, we will show an SVG circle in HTML with the help of JavaScript.

HTML `

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

`

Output: