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 :
- Illustrator (Payant)
- Inkscape (Libre)
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.
