Les meilleurs Tutoriels gratuits pour apprendre le SVG

Vandelay Design a réalisé une sélection de tutoriels SVG pour tout apprendre de zéro ainsi que de nombreux autres pour différents cas spéciaux comme par exemple la création de backgrounds sur votre site ou bien l’ajout d’animation.

Qu’est-ce que le SVG ?

SVG signifie Scalable Vector Graphics est un format de données qui permet de créer des graphiques vectoriels. A partir de son format proche du XML (donc du code) il permet de créer des éléments graphiques à partir des coordonnées et des couleurs définies. Voilà en version simple.

Cela fait maintenant quelques années que ce format s’impose de plus en plus pour le web pour sa légèreté et son caractère universel, fonctionnant sur tous les navigateurs. En plus, mêlé à un peu de Javascript, il est possible de faire des animations incroyables grâce au SVG.

La plupart des gens vont utiliser Illustrator pour créer ces images SVG, mais il est possible de les créer intégralement en code, pour avoir plus de contrôle et pouvoir les manipuler à volonté avec des librairies Javascript ou d’autres outils. Par exemple, on utilise énormément le SVG pour afficher des icônes, en remplaçant des images qu’il aurait fallu charger, ou encore pour animer des éléments de backgrounds ou de navigation de manière interactive.

Voici donc l’orientation de cet article : tout vous apprendre sur le SVG de zéro, jusqu’à plusieurs cas bien concrets. Maîtriser cette technologie est un avantage certain et cela démultiplie les possibilités créatives, je pense notamment aux animations qui se démocratisent de plus en plus et à l’impact sur les poids de chargements.

Tous les tutoriels vidéos plus bas sont issus de la sélection du blog Vandelay Design, je le rappelle, et sont gratuits, et en anglais (oui malheureusement !).