1.7. SVG <ellipse>

Example 1 ¶

<ellipse> Element is used to create an ellipse:

An ellipse is very similar to a circle. The difference is that the ellipse has different x and y radii, while the x and y radii of the circle are the same:

Here is the SVG code:

Example

<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><ellipsecx="300"cy="80"rx="100"ry="50"style="fill:yellow;stroke:purple;stroke-width:2"/></svg>

For Opera users: view the SVG file (right-click the SVG drawing preview source).

Code parsing:

• The x coordinate of the center of the ellipse defined by the CX property

• The y coordinate of the center of the ellipse defined by the CY property

• Horizontal radius defined by the RX attribute

• The vertical radius defined by the RY attribute

Example 2 ¶

The following example creates three superimposed ellipses:

Here is the SVG code:

Example

<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><ellipsecx="240"cy="100"rx="220"ry="30"style="fill:purple"/><ellipsecx="220"cy="70"rx="190"ry="20"style="fill:lime"/><ellipsecx="210"cy="45"rx="170"ry="15"style="fill:yellow"/></svg>

For Opera users: view the SVG file (right-click the SVG drawing preview source).

Example 3 ¶

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

Here is the SVG code:

Example

<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><ellipsecx="240"cy="50"rx="220"ry="30"style="fill:yellow"/><ellipsecx="220"cy="50"rx="190"ry="20"style="fill:white"/></svg>

For Opera users: view the SVG file (right-click the SVG drawing preview source).