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:
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.
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.
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!