W3docs
en
Log in

SVG Ellipse

On this page, you can find information about the SVG <ellipse> shape element, learn to create an ellipse with it and see different and interesting examples.

What is the SVG <ellipse> element?

The SVG <ellipse> element draws an ellipse — an oval, "stretched circle" shape. You position it by its center point (cx, cy) and give it two radii: rx for the horizontal radius and ry for the vertical radius.

This is the key difference from the <circle> element. A circle has a single radius (r) because it is equally wide in every direction. An ellipse needs two radii because it is wider in one direction than the other:

  • Use <circle> when the shape is perfectly round.
  • Use <ellipse> when you need an oval, or when rx and ry should differ.

If you set rx equal to ry, the ellipse renders as a circle.

The SVG coordinate system

Like every SVG shape, an ellipse is placed on the SVG canvas, where the origin (0, 0) is the top-left corner. The x-axis increases to the right and the y-axis increases downward. So cx="230" cy="120" places the ellipse's center 230 units from the left and 120 units down from the top. See the <svg> tag chapter for more on the coordinate system and the viewport.

Info

The <ellipse> element has no attribute for orientation, so its rx/ry axes are always horizontal and vertical. To tilt an ellipse, rotate it with the transform attribute (shown below).

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>
Try it Yourself »

In the code above, cx="230" and cy="120" set the center, rx="150" makes the ellipse 300 units wide, and ry="70" makes it 140 units tall. The style attribute fills it pink and gives it a 5-unit light-blue outline.

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>
Try it Yourself »

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>
Try it Yourself »

Example of rotating and styling an <ellipse>:

Because <ellipse> itself has no orientation attribute, you tilt it with the transform="rotate(...)" attribute. The first two numbers passed to rotate() after the angle are the center point to rotate around — here the ellipse's own center, so it spins in place. This example also uses opacity and a dashed outline via stroke-dasharray:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="200">
      <ellipse cx="200" cy="100" rx="150" ry="60"
        transform="rotate(-25 200 100)"
        style="fill:plum;opacity:0.7;stroke:purple;stroke-width:4;stroke-dasharray:10,6" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>

The rotate(-25 200 100) value rotates the ellipse 25 degrees counter-clockwise around the point (200, 100), opacity:0.7 makes it slightly transparent, and stroke-dasharray:10,6 draws the outline as 10-unit dashes separated by 6-unit gaps.

Attributes

AttributeDescription
cxThe x coordinate of the center of the ellipse.
cyThe y coordinate of the center of the ellipse.
rxThe horizontal radius (along the x-axis).
ryThe vertical radius (along the y-axis).
pathLengthThe total length for the path, in user units.

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

  • SVG <circle> — the round counterpart, using a single r radius.
  • HTML SVG tag — the <svg> container, viewport, and coordinate system.

Practice

Practice
Which attributes set the two radii of an SVG ellipse?
Which attributes set the two radii of an SVG ellipse?
Was this page helpful?