À quoi sert le SVG dans le web ?

Posté le 29 août 2017 modifié le 16 septembre 2022

Signifiant littéralement Scalable Vector Graphics, le format SVG présente de nombreux avantages sur le web. Si vous voulez ajouter des effets graphiques sans alourdir votre site web, il s’agit d’une alternative sur laquelle il est judicieux de se pencher. Possibilité de redimensionner le tout sans perte de qualité ou encore compatibilité avec la majorité des navigateurs, le SVG a de nombreux atouts.

Comprendre en quoi consiste le SVG

Le SVG est un format vectoriel dont l’apparition remonte à 1998 : il a été imaginé par un groupe de travail dans lequel on trouvait, entre autres, les géants IBM, Apple et Microsoft. Longtemps sous-estimé, ce format n’a été admis que dans la version 9 d’Internet Explorer — il s’est démocratisé un peu plus tôt sur Firefox, Safari, Chrome et Opéra.

Aujourd’hui, le SVG est retranscrit par la grande majorité des navigateurs web. Contrairement aux images en JPG, PNG ou GIT, il est déjà stocké, ce qui implique une légèreté qui impacte directement la vitesse de chargement. De plus, sans aucune perte de qualité, on peut étirer ces vecteurs facilement.

Un format simple à manipuler ?

L’apprentissage du SVG nécessite d’y passer un minimum de temps. Cependant, il ne s’agit pas d’une pratique totalement inaccessible ! La syntaxe est réputée plutôt simple et la création de visuels peut être envisagée, sans jamais rédiger une seule ligne de code, sur des logiciels accessibles comme Libre Office Draw (sachant que l’on peut aussi mobiliser Inkscape ou Illustrator).

Un éditeur de texte classique peut également se révéler suffisant pour les personnes maîtrisant le code, puisqu’il s’agit de réaliser du XML. Des personnalisations sont possibles grâce au CSS. Enfin, on peut aussi manipuler un SVG depuis Javascript.

L’intégration d’un SVG implique d’entrer dans le code du site web. Par la suite, la prise en charge par les différents navigateurs web est relativement bonne. On peut désormais concevoir des éléments graphiques de qualité avec cette méthode : parlez-en avec votre agence web !

Share this post:

Join the conversation

RECEVEZ NOS MEILLEURS ARTICLES !