From http://www.w3schools.com (Copyright Refsnes Data)

SVG <ellipse>

The <ellipse> tag is used to create an ellipse.

The <ellipse> Tag

The <ellipse> tag is used to create an ellipse. An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius.

Copy the following code into Notepad and save the file as "ellipse1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>

</svg>

Code explanation:

The cx attribute defines the x coordinate of the center of the ellipse
The cy attribute defines the y coordinate of the center of the ellipse
The rx attribute defines the horizontal radius
The ry attribute defines the vertical radius

View example

The following example creates three ellipses on top of each other:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:purple"/>

<ellipse cx="220" cy="70" rx="190" ry="20"
style="fill:lime"/>

<ellipse cx="210" cy="45" rx="170" ry="15"
style="fill:yellow"/>

</svg>

View example

The following example combines two ellipses (one yellow and one white):

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:yellow"/>

<ellipse cx="220" cy="100" rx="190" ry="20"
style="fill:white"/>

</svg>

View example