Qu’est-ce que le SVG ?
Le SVG ou « Scalable Vector Graphics » est un format de dessin vectoriel basé sur le langage XML. Il fût élaboré à partir de 1998 par un groupe de travail comprenant entre autres IBM, Apple, Microsoft, Xerox. Le SVG est beaucoup plus puissant que les autres formats d’images que nous pouvons utiliser sur le web ce qui lui confère un grand nombre d’avantages. À savoir, il a la particularité d’être manipulé avec du code soit dans un éditeur de texte, soit avec CSS ou JS. Malgré la renommée de ses concepteurs, ce format de dessin vectoriel ne fût pas directement estimé à sa juste valeur notamment à cause du manque de compatibilité avec les navigateurs (compatible avec Internet Explorer à partir de sa version 9 seulement).
Les avantages du SVG
Une facilité d’apprentissage
L’apprentissage de la création et de l’intégration du SVG nécessite d’y passer un minimum de temps suivant la difficulté des illustrations que vous voulez réaliser. Cependant, la syntaxe est simple et ses capacités sont comparables à celles du langage flash ! De plus, la création de ce format peut se faire sans jamais écrire une seule ligne de code grâce à des programmes comme Libre Office Draw, Inkscape ou encore Illustrator.
Un seul format d’image pour toutes les tailles d’écran
Scalable Vector Graphics qui se traduit par « Vecteur Graphique Adaptatif » en français définit ce format d’image comme un fichier vectoriel. À contrario des images bitmap qui s’adaptent très mal au changement de taille du fait qu’elles soient conçues de pixels, les images vectorielles ont cette capacité de s’adapter à toutes dimensions. Fini d’enregistrer vos images en différentes résolutions pour qu’elles s’adaptent dans votre site responsive, le SVG s’adapte par lui-même !
Un poids de fichier réduit
Comme dit précédemment, les Scalable Vector Graphics sont des formats de fichier basé sur le XML, ce qui signifie qu’il est composé de code. Son poids est donc insignifiant comparé à une image bitmap faite de pixel. Ce poids réduit influence grandement les temps de chargement d’un site, donc sa rapidité. En sachant qu’au-delà d’une seconde de chargement, un utilisateur moyen est capable d’abandonner sa recherche pour aller voir ailleurs. Cet avantage est non négligeable!
Une facilité de manipulation
Au-delà du fait que la création de SVG peut se faire via n’importe quel programme de création vectorielle (ce qui facilite grandement la réalisation), l’animation des fichiers SVG nécessite un minimum de pratique. Toutefois, il est facile de prendre en main le langage et d’animer des formes simples comme des icônes ou des logos. Plus vous pratiquerez, plus vos animations pourront être complexes !
Une conversion bitmap/svg très simple
Étant donné que ce format de fichier vectoriel n’a pas reçu l’intérêt qu’il méritait dès sa création, beaucoup de sites utilisent aujourd’hui des images bitmap alors que généralement l’utilisation du SVG est plus bénéfique. Par chance, les illustrations, les icônes, les formes, les logos, etc. sont totalement convertibles en SVG grâce à Illustrator par exemple. Ainsi en mettant votre site à jour vous n’avez qu’à remplacer vos fichiers PNG, jpeg, etc. par ces mêmes fichiers en SVG.
Un choix judicieux intemporel
L’importance d’avoir un site web rapide et performant, l’attrait pour les animations, la nécessité de captiver l’attention de l’utilisateur et l’attirance pour les formes organiques. Après 20 ans sans grande considération, le SVG récupère enfin la place qu’il mérite dans le monde du web!
