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

SVG ellipse Element


SVG Reference Complete SVG Reference

Definition and Usage

The SVG ellipse element 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.

The cx and cy attributes define the x and y coordinates of the center of the ellipse. If cx and cy are omitted, the ellipse's center is set to (0, 0).

The rx attribute defines the horizontal radius and the ry attribute defines the vertical radius of the ellipse.


Example 1

This example creates an ellipse.

Copy the following code into Notepad and save the file as "ellipse_1.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>

View example


SVG Reference Complete SVG Reference

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