Un aperçu du format SVG.

Le format SVG

SVG est un format d’images vectorielles (le terme signifie : Scalable Vector Graphics). Les images vectorielles peuvent être redimensionnées sans perte de qualité.

SVG est une norme développée par le World Wide Web Consortium (W3C) depuis 1999. Il est explicitement conçu pour fonctionner avec d’autres standards du W3C comme CSS.

Exemple de SVG venant de https://iconsvg.xyz/ :

<svg width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#9013fe" stroke-width="2" stroke-linecap="round"
    stroke-linejoin="round">
  <line x1="18" y1="6" x2="6" y2="18" />
  <line x1="6" y1="6" x2="18" y2="18" />
</svg>

Le résultat:

Vocabulaire du SVG

Un peu comme le HTML, le format SVG comporte toute une série de “balises”. Il en existe plusieurs dizaines (voir la liste).

Formes basiques

Voici quelques balises qui permettent de représenter des formes basiques:

  • les rectangles : <rect/>
  • les cercles et les ellipses : <circle/> et <ellipse/>
  • les lignes : <line/>
  • les polygones : <polygon/>

Chacun de ces éléments possède des attributs nécessaires pour le positionnement.

Les rectangles : on utilise la balise <rect> qui a quatre attributs:

  • x et y pour la position d’origine.
  • width qui donne la longueur.
  • height qui donne la hauteur.

Exemple: <rect x="10" y="10" width="80" height="50"/>

Résultat:

Les cercles : on utilise la balise <circle> qui a trois attributs:

  • cx et cy donne la position du centre du cercle.
  • r est le rayon.

Exemple: <circle cx="50" cy="50" r="50"/>

Résultat:

Propriétés CSS

Les éléments SVG ont des propriétés CSS particulières, voici quelques-unes des plus importantes:

  • fill donne la valeur de remplissage, c’est à dire la couleur dont sera peint notre objet.
  • stroke est la couleur de la bordure de notre objet.
  • stroke-width est la taille de cette bordure.

En dehors des propriétés spécifiques au SVG, les règles habituelles du CSS s’appliquent, y compris les animations, transitions, transforms, filters…

Ressources pour travailler avec les SVG

Collections d’icônes

Quelques collections d’icônes en SVG:

Créer ou modifier des SVG

Comme le SVG est un format libre, il existe un grand nombre d’outils pour les créer et modifier:

  • Illustrator, Sketch, Figma : tous ces éditeurs vectoriels peuvent exporter des SVG.
  • Inkscape est un logiciel de dessin vectoriel open source dont le format natif est le SVG.

Il existe de nombreux éditeurs en ligne:

Formes SVG venant du tutoriel pour Inkscape: Shapes

Guides et documentation