Post
Ask Question

Scalable Vector Graphics - Ellipse

Introduction

 
Before reading further, read the following articles.
Now let’s discuss SVG Ellipse.
 

SVG Ellipse

 
The tag <ellipse> is used here to create an 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 define the x and y coordinates of the center of the ellipse.
  • rx and ry are the attributes which define 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:
 
ellipse is centered
 
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:
 
attribute
 
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:
 
strokes
 
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:
 
height
  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:
 
filling
 
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:
 
Ellipse with no filling
 
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:
 
overlapping
  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:
 
Ellipse
 
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:
 
Ellipse with opacity
 
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:
 
Output
 
Want to read more. 
 
Thank you, keep learning and sharing.


Similar Articles