Summary -

In this topic, we described about the SVG Drawing Circle with detailed example.

<svg> with <circle> element is used to create the circles based on center point and a radius.

Syntax -

<svg>
    <circle cx="x-center-val" cy="y-center-val" r="radius-val" 
		fill="color-name" stroke="stroke-color" 
		stroke-width="stroke-with-in-pixels"/>
</svg>

  • The cx and cy attributes describes the x and y coordinates of the center of the circle. The circle's center is established to (0,0) when the cx and cy are excluded.
  • The r attribute describes the radius of the circle.

<circle> tag have the following attributes -

Attribute Value
cx Specifies the inside of the circle from x axis.
cy Specifies the inside of the circle from y axis.
r Specifies the radius of circle.
fill Specifies the fill environment of Circle.
stroke Specifies the outline color of circle.
stroke-width Specifies the width of stroke. 

Example1 -

Below example describes how to create circle with SVG.
<!DOCTYPE html>
<html lang="en">
	<body>
		<!-- Simple SVG circle without stroke-->
		<svg width="160" height="160" 
			style="border:2px solid #ccc; margin-right:4px;">
			<circle cx="80" cy="80" r="50" fill="pink"/>
		</svg> 
		<!-- Simple SVG circle with stroke of width 3px-->
		<svg width="160" height="160" style="border:2px solid #ccc;">
			<circle cx="80" cy="80" r="50" fill="red" stroke="green" 
                       stroke-width="2"/> 
		</svg>
	</body> 
</html>

Output-


Example2 -

Below example describes how to create circle with SVG hover effect.
<!DOCTYPE html>
<html lang="en">
	<head>
		<style>
			#cir:hover{fill:green;} /*Changes svg background on hover.*/
		</style>	
	</head>
	<body>
		<!-- Simple SVG circle with hover effect-->
		<svg width="160" height="160" style="border:2px solid #ccc">
			<circle id="cir" cx="80" cy="80" r="50" fill="blue" 
			stroke="yellow" stroke-width="3"/>
		</svg>
	</body> 
</html>

Output-