In SVG (Scalable Vector Graphics), an ellipse can be created using the <ellipse> element. The <ellipse> element is used to draw ellipses and circles. Here's the basic syntax for creating an ellipse in SVG:

xml
<svg width="width" height="height" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="center_x" cy="center_y" rx="radius_x" ry="radius_y" style="fill: color; stroke: color; stroke-width: width;" /> </svg>

Let's break down the attributes:

  • cx: The x-coordinate of the center of the ellipse.
  • cy: The y-coordinate of the center of the ellipse.
  • rx: The horizontal radius of the ellipse.
  • ry: The vertical radius of the ellipse.

You can also style the ellipse using the style attribute, where you can define the fill color, stroke color, and stroke width.

Now, let's see some examples:

Example 1: Simple Ellipse

xml
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="50" rx="80" ry="40" style="fill: lightblue; stroke: navy; stroke-width: 2;" /> </svg>

This example draws a light blue ellipse with a navy border.

Example 2: Circle

xml
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="50" cy="50" rx="50" ry="50" style="fill: yellow; stroke: orange; stroke-width: 2;" /> </svg>

This example creates a yellow circle with an orange border.

Example 3: Ellipse with Gradient Fill

xml
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="50" rx="80" ry="40" style="fill: url(#gradient); stroke: black; stroke-width: 2;" /> <defs> <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:lightgreen;stop-opacity:1" /> <stop offset="100%" style="stop-color:lightblue;stop-opacity:1" /> </linearGradient> </defs> </svg>

This example uses a linear gradient for the fill of the ellipse, creating a transition from light green to light blue.

Feel free to customize the values and styles according to your needs!