SVG Ellipse

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

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