Post

# Scalable Vector Graphics - Ellipse

• 5.8k
• 0
• 0

Now let’s discuss about SVG Ellipse.

SVG Ellipse

The tag <ellipse> is used here to create ellipse with a center point and two radii. As we can see that an ellipse is closely related to a circle as it also has a center point and a radius, But there are some differences that an ellipse has two radii x and y that differs from each other while circle has both radii x and y equal or considered as only one radius due to equality.

In other words, an ellipse is a circle that does not have equal height and width as well as its radius in x and y directions are different.

Syntax:

1. <svg height="200" width="300">
2.    <ellipse cx="150" cy="70" rx="80" ry="40" style="fill:red" />
3. </svg>

• cx and cy are the attributes which defines the x and y coordinates of center of the ellipse.
• rx and ry are the attributes which defines the horizontal and vertical radii of ellipse respectively.

Now let’s take a simple example to understand it properly.

Example 1

Regular ellipse:

1. <html>
2.     <body>
3.         <svg height="150" width="550">
4.             <ellipse cx="110" cy="80" rx="100" ry="50" style="fill:cyan;" />
5.             <ellipse cx="300" cy="80" rx="80" ry="40" style="fill:lime;" />
6.             <ellipse cx="450" cy="80" rx="60" ry="30" style="fill:pink;" />
7.         </svg>
8.     </body>
9. </html>
Output:

As we can see that the ellipse is centered in cx, cy like the circle. But the radius in the x and y directions are specified by two attributes, not by only one rx or ry attribute. As we can also see that, the rx attribute has a higher value than the ry attribute, making the ellipse wider than it is tall. Setting the rx and ry attributes the same number would result in a regular circle.

Example 2

Vertical ellipse.
1. <html>
2.     <body>
3.         <svg height="300" width="500">
4.             <ellipse cx="60" cy="130" rx="30" ry="70" style="fill:grey;" />
5.             <ellipse cx="160" cy="130" rx="40" ry="90" style="fill:tomato;" />
6.             <ellipse cx="280" cy="130" rx="50" ry="110" style="fill:lightgreen;" />
7.         </svg>
8.     </body>
9. </html>
Output:

Here, the ry attribute has a higher value than the rx attribute, making the ellipse taller than it is wide.

Example 3

Ellipse having different strokes/dashed strokes.

Ellipse having simple and different stroke values:
1. <html>
2.     <body>
3.         <svg height="150" width="550">
4.             <ellipse cx="110" cy="80" rx="100" ry="50" style="fill:red; stroke:black; stroke-width:2" />
5.             <ellipse cx="300" cy="80" rx="80" ry="40" style="fill:orange; stroke:blue; stroke-width:4" />
6.             <ellipse cx="450" cy="80" rx="60" ry="30" style="fill:yellow; stroke:purple; stroke-width:7" />
7.         </svg>
8.     </body>
9. </html>
Output:

Ellipse having dashed strokes with different stroke values:
1. <html>
2.     <body>
3.         <svg height="150" width="550">
4.             <ellipse cx="110" cy="80" rx="100" ry="50" style="fill:lightgreen; stroke:green; stroke-width:2; stroke-dasharray: 10 2;" />
5.             <ellipse cx="300" cy="80" rx="80" ry="40" style="fill:lightblue; stroke:blue; stroke-width:4; stroke-dasharray: 10 4;" />
6.             <ellipse cx="455" cy="80" rx="60" ry="30" style="fill:tomato; stroke:red; stroke-width:7; stroke-dasharray: 10 6;" />
7.         </svg>
8.     </body>
9. </html>
Output:

1. <html>
2.     <body>
3.         <svg height="300" width="300">
4.             <ellipse cx="110" cy="220" rx="50" ry="15" style="fill:tomato; stroke:red; stroke-width:3;" />
5.             <ellipse cx="110" cy="180" rx="100" ry="40" style="fill:tomato; stroke:red; stroke-width:3;" />
6.             <ellipse cx="110" cy="100" rx="20" ry="80" style="fill:yellow; stroke:orange; stroke-width:6; stroke-dasharray: 10 5;" />
7.         </svg>
8.     </body>
9. </html>
Output:

Example 4

Ellipse with no filling.
1. <html>
2.     <body>
3.         <svg height="300" width="600">
4.             <ellipse cx="60" cy="110" rx="30" ry="100" style="fill:none; stroke:red; stroke-width:6;stroke-dasharray: 10 5;" />
5.             <ellipse cx="200" cy="110" rx="80" ry="30" style="fill:none; stroke:black; stroke-width:4;" />
6.             <ellipse cx="340" cy="110" rx="30" ry="80" style="fill:none; stroke:blue; stroke-width:3; stroke-dasharray: 10 5;" />
7.         </svg>
8.     </body>
9. </html>
Output:

Example 5

Ellipse with overlapping.
1. <html>
2.     <body>
3.         <svg height="400" width="1000">
4.             <ellipse cx="180" cy="120" rx="150" ry="30" style="fill:lime; stroke:green; stroke-width:3;" />
5.             <ellipse cx="150" cy="90" rx="120" ry="25" style="fill:tomato" />
6.             <ellipse cx="120" cy="65" rx="90" ry="20" style="fill:cyan; stroke:blue; stroke-width:3; stroke-dasharray:10 5;" />
7.             <ellipse cx="100" cy="45" rx="70" ry="15" style="fill:grey" />
8.             <ellipse cx="80" cy="25" rx="50" ry="10" style="fill:orange; stroke:red; stroke-width:3;" />
9.             <ellipse cx="500" cy="120" rx="150" ry="30" style="fill:orange; stroke:red; stroke-width:3;" />
10.             <ellipse cx="500" cy="90" rx="120" ry="25" style="fill:grey" />
11.             <ellipse cx="500" cy="65" rx="90" ry="20" style="fill:cyan; stroke:blue; stroke-width:3; stroke-dasharray:10 5;" />
12.             <ellipse cx="500" cy="45" rx="70" ry="15" style="fill:tomato" />
13.             <ellipse cx="500" cy="25" rx="50" ry="10" style="fill:lime; stroke:green; stroke-width:3;" />
14.         </svg>
15.     </body>
16. </html>
Output:

1. <html>
2.     <body>
3.         <svg height="400" width="1000">
4.             <ellipse cx="70" cy="50" rx="50" ry="30" style="stroke:green; stroke-width: 3; fill:lightgreen;"/>
5.             <ellipse cx="80" cy="60" rx="50" ry="30" style="stroke: #ffff00; stroke-width: 5; stroke-dasharray:10 5; fill: none;"/>
6.             <ellipse cx="320" cy="60" rx="50" ry="40" style="fill:lightblue; stroke:blue; stroke-width:3;" />
7.             <ellipse cx="200" cy="60" rx="50" ry="30" style="fill:none; stroke:red; stroke-width:3;" />
8.             <ellipse cx="250" cy="60" rx="50" ry="30" style="fill:none; stroke:green; stroke-width:3; stroke-dasharray:10 5;" />
9.             <ellipse cx="390" cy="60" rx="50" ry="35" style="fill:none; stroke:orange; stroke-width:3; stroke-dasharray:10 5;" />
10.             <ellipse cx="440" cy="60" rx="50" ry="30" style="fill:none; stroke:cyan; stroke-width:3;" />
11.         </svg>
12.     </body>
13. </html>
Output:

Example 6

Ellipse with opacity.
1. <html>
2.     <body>
3.         <svg height="400" width="600">
4.             <ellipse cx="100" cy="80" rx="80" ry="40" style="fill:blue; stroke:blue; stroke-width:3; fill-opacity:0.3; stroke-dasharray:10 5;" />
5.             <ellipse cx="240" cy="80" rx="30" ry="70" style="fill:red; stroke:black; stroke-width:3; fill-opacity:0.5; stroke-opacity:0.5;" />
6.             <ellipse cx="380" cy="80" rx="80" ry="40" style="fill:green; stroke:green; stroke-width:3; stroke-dasharray:10 5; fill-opacity:0.7;" />
7.         </svg>
8.     </body>
9. </html>
Output:

Example 7

Two or more ellipse with different centers and radii.
1. <html>
2.     <body>
3.         <svg height="400" width="1000">
4.             <ellipse cx="180" cy="100" rx="150" ry="80" style="fill:blue; stroke:blue; stroke-width:3; fill-opacity:0.3; stroke-dasharray:10 5;" />
5.             <ellipse cx="155" cy="100" rx="120" ry="50" style="fill:red; stroke:black; stroke-width:3; fill-opacity:0.5; stroke-opacity:0.5;" />
6.             <ellipse cx="190" cy="100" rx="80" ry="40" style="fill:lime; stroke:blue; stroke-width:3; stroke-dasharray:10 5;" />
7.             <ellipse cx="200" cy="100" rx="50" ry="20" style="fill:orange; stroke:red; stroke-width:3; stroke-dasharray:10 5; fill-opacity:0.7;" />
8.             <ellipse cx="520" cy="100" rx="180" ry="70" style="fill:lime; stroke:blue; stroke-width:3; fill-opacity:0.3; stroke-dasharray:10 5;" />
9.             <ellipse cx="500" cy="100" rx="160" ry="60" style="fill:tomato; stroke:black; stroke-width:3; fill-opacity:0.5; stroke-opacity:0.5;" />
10.             <ellipse cx="480" cy="100" rx="140" ry="40" style="fill:cyan; stroke:black; stroke-width:3; fill-opacity:0.7;" />
11.             <ellipse cx="440" cy="100" rx="100" ry="30" style="fill:yellow; stroke:red; stroke-width:3; fill-opacity:0.7;" />
12.         </svg>
13.     </body>
14. </html>
Output:

Thank you, keep learning and sharing.

Recommended Free Ebook
Similar Articles