w3docs logo

SVG Ellipse

Description of the <ellipse> element

The SVG <ellipse> element creates ellipses. The ellipse is centered by using the cx and cy attributes. However, unlike the <circle> element, the radius in the x and y coordinates is specified by two attributes, not one.

An ellipse and a circle are similar. The difference between them is that an ellipse has an x and y radii, which differ from each other. The x and y radius of a circle is equal. Ellipses can’t define the exact orientation of the ellipse, but you can rotate it with the transform attribute.

Example of the SVG <ellipse> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="200" >
      <ellipse cx="230" cy="120" rx="150" ry="70" style="fill:pink;stroke:lightblue;stroke-width:5" />
      Sorry, inline SVG isn't supported by your browser.  
    </svg>
  </body>
</html>

Now let’s explain the code above:

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

Example of the SVG <ellipse> element for creating two ellipses on top of each other:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg  width="400" height="200">
      <ellipse cx="200" cy="110" rx="160" ry="25" style="fill:lightblue" />
      <ellipse cx="190" cy="85" rx="140" ry="20" style="fill:blue" />
      Sorry,inline SVG isn't supported by your browser. 
    </svg>
  </body>
</html>

You can add as many ellipses as you want with different colors and sizes.

Example of the SVG <ellipse> element for combining two ellipses:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="150" >
      <ellipse cx="200" cy="70" rx="200" ry="35" style="fill:purple" />
      <ellipse cx="190" cy="70" rx="160" ry="25" style="fill:lightgrey" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>
Attribute Description
cx This attribute specifies the x position of the ellipse.
cy This attribute specifies the y position of the ellipse.
rx This attribute specifies the radius of the ellipse on the x-axis.
ry This attribute specifies the radius of the ellipse on the y-axis.
pathlength This attribute specifies the total length for the path, in user units.

The SVG <ellipse> element also supports the Global Attributes and Event Attributes.

Practice Your Knowledge

What attributes can be used to define the SVG ellipse in HTML?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?