Les bases de SVG : Cercles et Ellipses

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. Dudley Storey.

Par

Même si la plupart des designers utilisent logiciel de création graphique du type Adobe Illustrator ou Sketch 3 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 :

  1. L’élément circle doit être “auto-fermant”
  2. Le cercle est positionné à partir de son centre (cx pour “centre, axe des x”, cy pour “centre, axe des y”)
  3. La position du centre du cercle est mesurée à partir du coin supérieur gauche de l’élément SVG
  4. Le rayon (r) du cercle est, par défaut, mesuré dans la même unité que le reste
  5. 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)
  6. 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;
}
Captain America’s Shield

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 viewPort="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 urile 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 viewPort="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.

Le code du bouclier de Captain America sur CodePen.

Dans la même série :

Les bases de SVG : Cercles et Ellipses
Les bases de SVG : Rectangles et Carrés
Les bases de SVG : Polygones
Les bases de SVG : Lignes simples et multiples


Intéressé par SVG ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles consacrés à SVG dans La Cascade


Du même auteur dans La Cascade :

Les bases de SVG : Lignes simples et multiples
Les bases de SVG : Polygones
Les bases de SVG : Rectangles et Carrés
Scroll avec background révélé, en pur CSS
Brood X : Le principe des cigales en CSS
5 règles pour rendre SVG accessible
3 raisons d’utiliser HSL pour vos couleurs
Utiliser HSL pour vos couleurs
Effets vidéo HTML5 avec CSS Blend-Modes
Un carrousel responsif en pur CSS
Combiner CSS clip-path et Shapes
Appropriation culturelle : utiliser les collections des musées
Créer un player audio en HTML5 (3 articles)
Qu’est-ce qu’un élément remplacé ?
Utiliser CSS object-fit
Stores vénitiens 3D en CSS
CSS : Aider la veuve et l’orphelin
Toi seul : utiliser only-child de CSS
Créer un background vidéo fullscreen avec HTML5
Rendre un SVG responsif
La première variable CSS : currentColor
Empty, une pseudo-classe pas si vide
Les raccourcis HTML5


original paru le dans le blog de Dudley Storey, Demosthenes.info.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu’il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Dudley Storey © 2015.