The <ellipse> element is an SVG basic shape, used to create ellipses based on a center coordinate, and both their x and y radius.

Note: Ellipses are unable to specify the exact orientation of the ellipse (if, for example, you wanted to draw an ellipse tilted at a 45 degree angle), but it can be rotated by using the transform attribute.

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="50" rx="100" ry="50" />
</svg>

Attributes

cx
The x position of the ellipse.
Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
cy
The y position of the ellipse.
Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
rx
The radius of the ellipse on the x axis.
Value type: auto|<length>|<percentage> ; Default value: auto; Animatable: yes
ry
The radius of the ellipse on the y axis.
Value type: auto|<length>|<percentage> ; Default value: auto; Animatable: yes
pathLength
This attribute lets specify the total length for the path, in user units.
Value type: <number> ; Default value: none; Animatable: yes

Note: Starting with SVG2 cx, cy, rx and ry are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.

Global attributes

Core Attributes
Most notably: id, tabindex
Styling Attributes
class, style
Conditional Processing Attributes
Most notably: requiredExtensions, systemLanguage
Event Attributes
Global event attributes, Graphical event attributes
Presentation Attributes
Most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
ARIA Attributes
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

Usage notes

CategoriesBasic shape element, Graphics element, Shape element
Permitted contentAny number of the following elements, in any order:
Animation elements
Descriptive elements

Specifications

Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of '<ellipse>' in that specification.
Candidate Recommendation Added auto value for rx and ry
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<ellipse>' in that specification.
Recommendation Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes1.5983
cx1 Yes1.5983
cy1 Yes1.5983
rx1 Yes1.5983
ry1 Yes1.5983
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support3 Yes Yes4 Yes3 ?
cx3 Yes Yes4 Yes3 ?
cy3 Yes Yes4 Yes3 ?
rx3 Yes Yes4 Yes3 ?
ry3 Yes Yes4 Yes3 ?

See also

Document Tags and Contributors

Last updated by: Jeremie,