An oval avatar, a cast shadow under an object sitting on the ground, a stylized rugby ball: as soon as a round shape is not perfectly circular, the <ellipse> element is the one to reach for. It also shows up constantly as a decorative background, to create light halos or stretched bubbles in an illustration. It also shows up in slightly squashed circular gauges and in stylized face icons, where a perfect circle would make the drawing feel too rigid.
Many beginners first try to deform a circle with transform="scale()", when a single <ellipse> tag is enough to get the wanted shape directly, without distorting the stroke's outline.
Definition
The <ellipse> element draws an ellipse defined by a center (cx, cy) and two separate radii, rx for the horizontal radius and ry for the vertical radius. When rx and ry share the same value, the ellipse visually becomes a perfect circle, but SVG still keeps a separate <circle> tag, simpler to write, for that exact case since it only needs a single radius r instead of two.
If cx or cy are omitted, they default to 0, so the ellipse's center ends up in the top-left corner of the SVG coordinate system, which is why an ellipse with no center specified often looks half cut off on screen.
Main attributes
| Attribute | Role |
|---|---|
cx, cy | Position of the ellipse's center |
rx | Horizontal radius (half-width) |
ry | Vertical radius (half-height) |
fill, stroke | Fill color and outline color |
Concrete rendering example
An oval cast shadow under an object, typical of flat illustrations:
<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="100" rx="70" ry="14" fill="#000000" opacity="0.15" />
<ellipse cx="100" cy="55" rx="35" ry="45" fill="#f4a261" />
</svg>The first ellipse, very flat thanks to a ry much smaller than rx, simulates a shadow on the ground. The second, taller than it is wide, draws the oval body of a character or an object sitting right above it.
Difference from a circle
The distinction comes down to one thing: the number of radii. A circle only needs a single radius r since it looks the same in every direction, while an ellipse needs two independent values, rx and ry, to stretch differently in width and height. Using <ellipse> with rx equal to ry works visually, but a genuine circle is better left as a circle tag: the code then states the intent clearly, which makes the SVG file easier to read and maintain later.
Common pitfall
<ellipse> element is positioned by its center (cx, cy), not by a corner. Forgetting this detail often produces an ellipse that sits off from the rest of the drawing: to line up an ellipse with a rectangle of width w starting at x, its center must be placed at x + w / 2, not at x.Real-world use case
Flat design illustrations rely heavily on ellipses for cast shadows, light reflections on a sphere, or cloud silhouettes. An ellipse animated with <animateTransform> can also simulate a bouncing object, by squashing its height at the moment of impact before it springs back to shape. In a face illustration, two small ellipses layered over larger ones classically form eyes, the outer ellipse standing in for the white of the eye and the inner one for the pupil.
FAQ
Yes, with the transform attribute and a rotation, but note that the rotation turns the whole ellipse around a point, it does not change the orientation of its rx and ry radii, which stay horizontal and vertical within the shape's own coordinate system. To actually tilt the ellipse at an angle, like in a slanted logo, that rotation has to be combined with the transform attribute rather than looking for a dedicated angle attribute, which does not exist on <ellipse>.
Yes, by pointing the stroke attribute to a gradient defined elsewhere in the document with linearGradient or radialGradient, exactly like with any other SVG shape.
rx or ry set to 0 render as?It simply is not shown on screen, the browser treats a shape with a zero radius as having no visible surface, without raising any particular error.