<ellipse> en SVG : le cercle qui s'étire dans une seule direction

Un avatar ovale, l'ombre portée d'un objet posé au sol, un ballon de rugby stylisé : dès qu'une forme ronde n'est pas parfaitement circulaire, c'est l'élément <ellipse> qu'il faut utiliser. Il apparaît aussi très souvent en arrière-plan décoratif, pour créer des halos de lumière ou des bulles étirées dans une illustration. On la retrouve également dans les jauges circulaires légèrement écrasées et dans les icônes de visage stylisées, où un cercle parfait rendrait le dessin trop rigide.

Beaucoup de débutants tentent d'abord de déformer un cercle avec transform="scale()", alors qu'une seule balise <ellipse> suffit à obtenir directement la forme voulue, sans distordre le contour du trait.

Définition

L'élément <ellipse> dessine une ellipse définie par un centre (cx, cy) et deux rayons distincts, rx pour le rayon horizontal et ry pour le rayon vertical. Quand rx et ry ont la même valeur, l'ellipse devient visuellement un cercle parfait, mais SVG conserve tout de même une balise <circle> séparée, plus simple à écrire, pour ce cas précis puisqu'elle ne demande qu'un seul rayon r au lieu de deux.

Si cx ou cy sont omis, leur valeur par défaut est 0, le centre de l'ellipse se retrouve alors dans le coin supérieur gauche du repère SVG, ce qui explique pourquoi une ellipse sans centre précisé semble souvent à moitié coupée à l'écran.

Attributs principaux

Exemple de rendu concret

Une ombre portée ovale sous un objet, typique des illustrations plates :

<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>

La première ellipse, très aplatie grâce à un ry largement inférieur à rx, simule une ombre au sol. La seconde, plus haute que large, dessine le corps ovale d'un personnage ou d'un objet posé juste au-dessus.

Différence avec le cercle

La distinction tient en un mot : le nombre de rayons. Un cercle n'a besoin que d'un seul rayon r puisqu'il est identique dans toutes les directions, alors qu'une ellipse a besoin de deux valeurs indépendantes, rx et ry, pour s'étirer différemment en largeur et en hauteur. Utiliser <ellipse> avec rx égal à ry fonctionne visuellement, mais un cercle réel gagne à rester une balise circle : le code annonce alors clairement l'intention, ce qui facilite la relecture et la maintenance du fichier SVG.

Piège classique

Cas d'usage réel

Les illustrations plates (« flat design ») utilisent massivement des ellipses pour les ombres portées, les reflets de lumière sur une sphère, ou les silhouettes de nuages. Une ellipse animée avec <animateTransform> peut aussi simuler un objet qui rebondit, en compressant sa hauteur au moment de l'impact avant de reprendre sa forme. Dans une illustration de visage, deux petites ellipses superposées à des ellipses plus grandes forment classiquement des yeux, l'ellipse extérieure figurant le blanc de l'œil et l'ellipse intérieure la pupille.

Foire aux questions

Oui, avec l'attribut transform et une rotation, mais attention, la rotation tourne l'ellipse entière autour d'un point, elle ne change pas l'orientation de ses rayons rx et ry qui restent toujours horizontal et vertical dans le repère de la forme. Pour orienter réellement l'ellipse selon un angle, comme dans un logo penché, il faut combiner cette rotation avec l'attribut transform plutôt que de chercher un attribut d'angle dédié, qui n'existe pas sur <ellipse>.

Oui, en associant l'attribut stroke à un dégradé défini ailleurs dans le document via linearGradient ou radialGradient, exactement comme pour n'importe quelle autre forme SVG.

Elle n'est simplement pas affichée à l'écran, le navigateur considère qu'une forme avec un rayon nul n'a pas de surface visible, sans lever d'erreur particulière.