Summary -

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

<svg> with <ellipse> element is used to design an ellipse in SVG. An ellipse is intimately associated to a circle. The difference is an ellipse has x-axis and y-axis radius that varies from each other, while a circle has same radius of x-axis and y-axis.

Syntax -

<ellipse cx="cx-value" cy="cy-value" rx="rx-value" ry="ry-value" 
	stoke="stroke-width-in-pixels"/>

Attribute Value
rx Specifies the x-axis radius.
ry Specifies the y-axis radius.
cx Specifies the Inside Position from left.
cy Specifies the Inside Position from top.
stroke Specifies width of outline.

Example -

Below example describes how to draw ellipse with SVG.
<!DOCTYPE html>
<html>
   	<head> 
      	<title>SVG Ellipse </title>
		<style> svg {border: 1px solid blue;} </style>		
   	</head>
	<body>
		<!-- Simple ellipse -->
		<svg height="150" width="400">
			<ellipse cx = "110" cy = "70" rx = "90" ry = "50" 
				fill = "orange" />
		</svg> 
    
		<!-- Simple ellipses with stroke -->
		<svg height="150" width="400">
			<ellipse cx="110" cy="80" rx="90" ry="50" 
			  style="fill:blue;stroke:green;stroke-width:2" /> 
		</svg>
		
		<!-- combines two ellipses(one red and one white) -->
		<svg height="100" width="400">
			<ellipse cx="110" cy="60" rx="80" ry="30" 
				style="fill:red" />
			<ellipse cx="110" cy="60" rx="60" ry="20" 
				style="fill:white" />
		</svg>  
	</body>
</html>

Output -