SVG, Scalable Vector Graphics est un format d'images vectorielles basé sur le langage XML.

Il aura malheureusement fallu attendre la version 9 d'internet explorer avant que ce format soit supporté et enfin apprécié à sa juste valeur et il n'y a dorénavant plus aucun frein à son adoption.

Les avantages

Le SVG est un format d'images vectorielles, qui se base sur des formes géométriques plutôt que des pixels. Ce qui a pour effet de rendre l'image étirable à l'infinie sans perte de qualité.

L'autre avantage c'est que l'on peut aussi éditer les images SVG avec n'importe quel éditeur de texte (l'avantage du XML).

Outils

Alors là vous vous dites "super c'est trop top génial comment qu'on crée un SVG". Il existes plusieurs outils de création d'images vectorielles :

Insertion

Le SVG est un format d'image donc on peut l'insérer comme n'importe quelle image

  • Dans l'HTML : <img src="..."
  • Avec le CSS : background-image:url(...)
  • Directement dans le code HTML

Et c'est justement ce 3ème cas qui nous intérèsse aujourd'hui car le code peut être généré côté serveur (avec PHP par exemple) ou encore manipulé via Javascript pour créer des graphiques par exemple.