SVG

4

Le SVG (Scalable Vector Graphic) est un format d'image vectorielle. Afin de comprendre son utilité et ses avantages, il est nécessaire de saisir la différence entre le format vectoriel et matriciel.

Vectoriel

Comme leur nom l'indique, les images vectorielles sont constituées de vecteurs. Ces vecteurs peuvent prendre la forme d'un rectangle, d'un cercle, d'un polygone, bref, de toutes formes géométriques pouvant être définies avec des coordonnées, des lignes droites ou des courbes de Béziers.

Ces images sont produites à l'aide des logiciels:

  • Illustrator
  • Sketch
  • Figma
  • etc.

Afin de simplifier le code généré par ces logiciels, il est possible d'utiliser l'outil SVGOMG.

Matriciel

À l'opposée les images dites matricielles (jpg, png, gif, webp, etc.) sont constituées d'une matrice de pixels permettant de reproduire une image.

Plus une image est en haute définition, plus elle contient de pixels dans un même espace.

Source: 4k.com

Ces images sont produites à l'aide des logiciels:

  • Photoshop
  • Gimp
  • Paint
  • etc.

Le nom Pixels est la contraction des abréviations Pics (picture) et el (elements).

Importation

Par exemple pour importer l'image suivante:

Importation classique

Tout comme une image matricielle régulière (jpg, png, etc.), une image SVG peut être importée via la balise <img>.

<img src="dossier/image.svg">

Importation en ligne

Puisqu'une image SVG est constituée de formes écrites dans un format de balises, il est possible d'insérer son code directement dans une page HTML.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect width="100" height="100" fill="red"/>
  <polygon points="0,0 50,0 50,50 0,80" fill="green"/>
  <polygon points="100,0 100,80 50,50 50,0" fill="blue"/>
</svg>

Remarquez l'attribut viewbox. Les 4 chiffres à l'intérieur définissent les dimensions de base de l'image. Les deux premiers représentent la largeur et la hauteur minimale de l'image (généralement, ces chiffres ont une valeur de 0). Les deux suivants représentent la largeur et la hauteur de référence utilisée afin de positionnement les éléments de l'image.

Tous les éléments à l'intérieur de la balise <svg> sont des formes à afficher dans l'image.

  1. La première est un rectangle rouge 🔴 de 100 par 100, donc couvrant l'ensemble de la surface de l'image.
  2. La deuxième est un polygone vert 🟢 affiché par-dessus le carré rouge. L'attribut points correspond à la position des points X et Y constituant la forme à afficher. Par exemple, 0,0 indique que le 1er point est positionné à la position X:0 et Y:0. Le 2e à la position X:50 et Y:0 et ainsi de suite.
  3. La troisième est aussi un polygone, cette fois-ci bleu 🔵, assez similaire au polygone précédent.

Manipulation CSS et JS

Lorsqu'une image SVG est importée en ligne, il est possible de manipuler ses formes en CSS et JavaScript, comme toute autre balise HTML.

CSS

Plusieurs propriétés CSS de base sont compatibles avec les formes SVG. Cependant, certaines propriétés leur sont propres:

  • fill contrôlant la couleur de fond (équivalent de background-color).
  • stroke contrôlant la bordure (équivalent de border).

Par exemple, la propriété fill de la forme verte est modifiée lorsque la forme est survolée.

Voir le CodePen de Simon Arnold (@smnarnold).

Ou encore d'animer la position de certains points

Voir le CodePen de Simon Arnold (@smnarnold).

Redimensionnement

Les images matricielles et vectorielles peuvent produire des résultats similaires dans conditions optimales, comme dans l'exemple ci-dessous.

  • À gauche ⬅️, vectoriel (png)
  • À droite ➡️, matriciel (svg).

Voir le CodePen de Simon Arnold (@smnarnold).

Cependant, lorsque ces images sont redimensionnées (passez votre souris sur les images), remarquez comment les lignes diagonales réagissent. Sur l'image vectorielle, aucune perte de qualité n'est perceptible tandis que sur l'image matricielle, elles deviennent pixélisées et floues.

Cette particularité rend l'usage d'images vectorielles avantageuses pour des éléments polyvalents pouvant être utilisés à toutes les sauces, telles que des logos ou signatures.

Glyphs.fyi: une collection d'icônes SVG de haute qualité

Pour en savoir plus, voir cet article MDN à propos des SVG.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme