SVG Ellipse

SVG Element

The SVG Element

The <ellipse> element is used to create an ellipse, which is a closed curve resembling a stretched circle.

An ellipse is defined by its center coordinates and two radii: one for the x-axis (horizontal) and one for the y-axis (vertical). If both radii are equal, the ellipse becomes a circle.

Example 1: Creating a Simple Ellipse

The following example creates a single yellow ellipse with a purple border:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Ellipse Example 1</title>
</head>
<body>
  <svg width="500" height="140">
    <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow; stroke:purple; stroke-width:2px;" />
  </svg>
</body>
</html>

Code Explanation:

• cx: Defines the x-coordinate of the center of the ellipse. Default is 0.
• cy: Defines the y-coordinate of the center of the ellipse. Default is 0.
• rx: Defines the horizontal radius of the ellipse. This attribute is required.
• ry: Defines the vertical radius of the ellipse. This attribute is required.
• style: Used here to set the fill color, stroke color, and stroke width. Alternatively, presentation attributes like fill="yellow", stroke="purple", and stroke-width="2" can be used directly on the element.

Example 2: Layering Multiple Ellipses

SVG elements are rendered in the order they appear in the document. This example creates three ellipses layered on top of each other:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Ellipse Example 2</title>
</head>
<body>
  <svg width="500" height="150">
    <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>
</body>
</html>

Rendering Order: The purple ellipse is drawn first, then the lime ellipse on top of it, and finally the yellow ellipse on top of both.

Example 3: Combining Ellipses for Effect

This example combines two ellipses to create a simple visual effect, like a ring or a button highlight:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Ellipse Example 3</title>
</head>
<body>
  <svg width="500" height="100">
    <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow;" />
    <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white;" />
  </svg>
</body>
</html>

Tip: Ellipses are fundamental shapes in vector graphics. They can be used for anything from simple ovals to components of more complex illustrations like eyes, wheels, or planetary orbits.