SVG Ellipse

Posted in SVG Tutorial

Updated on May 20, 2024

By Mari Selvan

👁️ 39 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

In Scalable Vector Graphics (SVG), ellipses offer a way to represent curved shapes and circles with varying radii along the x and y axes. They're crucial for creating smooth, rounded visuals in web design and data visualization.

This guide will explore the syntax, attributes, and usage of SVG ellipses.

💡 Syntax

The <ellipse> element is used to create ellipses in SVG. Here's the basic structure:

index.html

Copied

<svg>
  <ellipse cx="center-x" cy="center-y" rx="x-radius" ry="y-radius" />
</svg>

🧰 Attributes

cx: Specifies the x-coordinate of the center of the ellipse.
cy: Specifies the y-coordinate of the center of the ellipse.
rx: Specifies the horizontal radius of the ellipse.
ry: Specifies the vertical radius of the ellipse.
abc: Additional attributes like fill, stroke, and stroke-width can be used for styling.

📄 Example

Let's create a simple SVG ellipse:

index.html

Copied

<svg width="200" height="150">
  <ellipse cx="100" cy="75" rx="80" ry="50" fill="green" stroke="black" stroke-width="2" />
</svg>

🧠 How it works?

In this example, we've defined a green ellipse with a black border, centered at (100, 75) and with horizontal and vertical radii of 80 and 50 units, respectively.

🎉 Conclusion

SVG ellipses provide a powerful tool for adding curved shapes and circles to your web projects. By mastering their syntax and attributes, you can enhance the visual appeal and interactivity of your SVG-based designs.

Experiment with different sizes, positions, and styles to unlock the full potential of SVG ellipses in your creations.