Les bases de SVG : Cercles et ellipses

par Dudley Storey, 25 mai 2015, svg, article original paru le 24 mai 2015 dans the new code

Même lorsqu’on utilise un logiciel de création graphique pour créer des SVG, la connaissance de la syntaxe permet de créer plus rapidement et efficacement des formes simples.

Même si la plupart des designers utilisent un logiciel de création graphique du type Adobe Illustrator ou Sketch pour créer des formes en SVG, le fait de connaître la syntaxe de base de SVG permet de créer plus facilement et plus précisément des éléments tels que lignes, cercles et rectangles — et parfois, encoder ces éléments à la main est plus rapide et plus efficace qu’un éditeur visuel.

Cercles

Regardons par exemple le tracé basique d’un cercle. Pour faire simple, je laisserai pour un prochain article les complications des unités et de leurs variations.

Vous pourriez écrire ce code à l’intérieur d’une balise <body> sur une page HTML, ou bien comme un document séparé, enregistré avec l’extension .svg — dans les deux cas le résultat serait visible dans un navigateur.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="red" />
</svg>

…et le résultat est le suivant :

Quelques points à noter à ce stade :

L’élément circle doit être “auto-fermant”
Le cercle est positionné à partir de son centre (cx pour “centre, axe des x”, cy pour “centre, axe des y”)
La position du centre du cercle est mesurée à partir du coin supérieur gauche de l’élément SVG
Le rayon (r) du cercle est, par défaut, mesuré dans la même unité que le reste
Si l’un de ces attributs n’est pas mentionné, il est supposé être égal à 0 (et noir pour les attributs de présentation impliquant la couleur)
le remplissage (fill) du cercle peut être spécifié via le système de couleur CSS que vous préférez.

Comme les rectangles et les autres éléments SVG, un cercle SVG est constitué de deux “parties”, un remplissage interne et un tracé (stroke) externe.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="red" stroke-width="15" stroke="black" />
</svg>

Le code du cercle est un peu long et compliqué : nettoyons-le avec un sélecteur de classe :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="80" class="redcirc" />
</svg>

…et utilisons ce CSS :

//CSS
svg {
  width: 200; height: 200;
}
.redcirc {
  fill: red;
  stroke: black;
  stroke-width: 15;
}

Le résultat est le même que dans la version précédente :

Notes :

Cela ne signifie pas que vous ayez tout d’un coup la possibilité d’appliquer fill aux éléments HTML. fill, stroke et stroke-width ne s’appliquent qu’aux éléments SVG. La plupart des attributs de présentation SVG ont un équivalent en propriété CSS, mais pas tous.
Si vous écrivez votre SVG dans le contexte d’une page HTML, la classe .redcirc peut se trouver dans la partie <head> de votre document ou dans une feuille de style externe.
La largeur du trait (stroke-width) est répartie de façon égale des deux côtés du contour de l’élément.

Une fois que nous avons ceci, il est très facile de commencer à créer des tracés plus complexes. Je pense que vous voyez déjà où nous allons en venir :

<svg viewBox="0 0 500 500">
  <title>Captain America’s Shield</title>
  <circle cx="250" cy="250" r="250" fill="red" />
  <circle cx="250" cy="250" r="200" fill="white" />
  <circle cx="250" cy="250" r="150" fill="red" />
  <circle cx="250" cy="250" r="50" fill="blue" />
  <polygon fill="white" points="250,150 280,209 346,219 298,265 309,330 250,300 192,330 203,265 155,219 221,209" />
</svg>

Remarquez que les éléments SVG s’empilent comme les éléments HTML.

Cependant, nous pouvons être plus malins ! D’une manière générale, moins il y a d’éléments dans un document SVG et mieux on se porte, donc nous pouvons simuler des sections du bouclier en utilisant stroke et seulement deux cercles :

<svg viewBox="0 0 500 500">
  <title>Captain America’s Shield</title>
  <circle cx="250" cy="250" r="220" fill="white" />
  <circle cx="250" cy="250" r="125" fill="blue" />
  <polygon fill="white" points="250,150 280,209 346,219 298,265 309,330 250,300 192,330 203,265 155,219 221,209" />
</svg>

combinés avec ce CSS :

//CSS
circle {
  stroke-width: 50;
  stroke: red;
}

Le résultat est le même que l’original. La version complète (ci-dessus) utilise également une variation intéressante de flexbox et de box-shadow pour positionner et ombrer le bouclier.

Ellipses

La syntaxe de l’ellipse est proche de celle du cercle :

<svg viewBox="0 0 120 120">
  <ellipse cx="60" cy="60" rx="60" ry="30"/>
</svg>

Ici, nous avons deux rayons représentant le demi-grand-axe (semi-major) et le demi-petit-axe (semi-minor) de l’ellipse.

Un trait utile des cercles et des ellipses (et des formes SVG en général) écrites en ligne dans une page est que, contrairement aux éléments HTML, leur “zone active” correspond exactement à leur forme. Donc si nous insérons un lien dans notre ellipse :

<svg viewBox="0 0 120 120">
  <a xlink:href="http://www.cnn.com">
    <ellipse cx="60" cy="60" rx="50" ry="25" />
  </a>
</svg>

et que nous combinons ceci avec ce CSS :

//CSS
ellipse:hover { fill: red; }

nous obtenons exactement ceci : remarquez la réponse précise en fonction de la position de la souris.

Il est possible de reproduire cette forme en HTML via border-radius sur un élément, mais le défi devient insurmontable dès lors que les formes de boutons sont plus compliquées — et c’est l’une des raisons qui font de SVG un excellent format pour les éléments d’interface utilisateur.

voir Le bouclier de Captain America de dudleystorey dans CodePen

La Cascade

Les bases de SVG : Cercles et ellipses

Cercles

Ellipses

Articles de Dudley Storey traduits dans La Cascade