Qu’est-ce que le SVG ?


3 mn de lecture

Temps de lecture : 3 minutes

Le SVG (Scalable Vector Graphics) est un format d’image dynamique souvent utilisé pour afficher les logos sur une page Web. Il est généré à partir d’un code : le XML (eXtensible Markup Language). Comme le HTML, le XML fonctionne avec des balises. Mais, il est beaucoup plus strict. Vous ne pouvez pas, par exemple omettre une balise de fermeture car cela rendra le fichier SVG invalide.

Pourquoi utiliser du SVG ?

Bien que le SVG ait été conçu à la fin des années 1990, il a été négligé par la plupart des navigateurs Web jusqu’à 2017. Aujourd’hui le SVG est sans aucun doute devenu le format graphique le plus largement utilisé sur la toile. Cela n’est pas arrivé par hasard. Voici pourquoi.

A la différence des formats de fichiers graphiques traditionnels tels que le JPG et PNG qui sont parfaits pour la photographies ou les images très complexes, il s’avère que SVG est le format graphique qui répond le plus aux exigences actuelles du développement Web en matière d’évolutivité, de réactivité, d’interactivité, de performance et d’accessibilité.

Pour vous donner un aperçu de ce à quoi ressemble le code SVG, voici comment dessiner un cercle blanc avec une bordure noire:

<circle cx="100" cy="100" r="50" stroke-width="4" stroke="#000" fill="#fff" />

Comme vous pouvez le voir, le SVG ce n’est rien de plus qu’une image vectorielle décrit par des lignes de codes. On y trouve des courbes, des formes, des couleurs et du texte. Ce code n’est certes pas compréhensible par les non-initiés, mais il se modifie facilement lorsqu’il est intégré dans un document HTML.

Le SVG peut se modifié via du CSS ou du JavaScript. Cela donne au SVG une flexibilité et une polyvalence qui ne peuvent jamais être égalées par les formats graphiques traditionnels comme le PNG, le GIF ou le JPG.

Le SVG intègre parfaitement les normes du W3C. Cela signifie qu’il peut interagir facilement avec d’autres langages et standards. Notamment JavaScript, DOM, CSS et HTML. Tant que le W3C continuera à définir les standards mondiaux du Web, il est fort probable que le SVG continue à faire partie de la norme pour les images vectoriels utilisées par les navigateurs Internet.

L’avantage principal du SVG est qu’il est parfait adapté au Web moderne :

Évolutivité et réactivité du SVG

Pour être utilisé, le SVG fonctionne avec des vecteurs plutôt qu’avec des pixels. Ce qui lui une résolution et évolutive. Vous pouvez changer l’échelle autant que vous voulez la taille de votre image, la qualité ne sera jamais altérée.

En revanche, avec les formats tels que le GIF, JPG et PNG qui ont des dimensions fixes, les images pixelisent lorsqu’elle sont agrandies.

Programmabilité et interactivité du SVG

Le SVG est entièrement modifiable et scriptable. Toutes sortes d’animations et d’interactions peuvent être ajoutées à un graphique SVG via du CSS ou du JavaScript.

Accessibilité du SVG

Les fichiers SVG sont intégrés à partir de texte. Lorsqu’ils sont incorporés dans une page Web, ils peuvent être indexés. Ce qui les rend accessibles aux différents types d’écrans et aux moteurs de recherche.

Performance du SVG

L’un des aspects les plus importants ayant un impact sur les performances Web est la taille des fichiers utilisés sur une page Web. Les graphiques SVG sont très légers. Beaucoup plus léger que les formats de fichier bitmap.

Cas d’utilisation du SVG et prise en charge des navigateurs

Illustrations et schémas

Tout dessin qui peut être reproduit à l’aide d’un crayon et d’un stylo peut parfaitement être converti au format SVG. Vous pouvez trouver des nombreux convertisseur de fichier en SVG.

Logos et icônes

Les logos et les icônes sont des candidats idéaux pour le SVG. Quelle que soit leur taille. De plus, les icônes SVG sont plus accessibles et sont beaucoup plus faciles à agencer point de vue design.

Animations

Vous pouvez créer des animations attrayantes à l’ aide du SVG. En fait, le code SVG est fait pour interagir avec l’animation CSS et JavaScript.

Interactivité (graphiques, infographies, cartes)

Le SVG peut être utilisé pour tracer des données et les mettre à jour dynamiquement en fonction des actions de l’utilisateur ou d’autres événements. Voir Infographie SVG interactive et Carte routière interactive SVG .

Effets spéciaux

De nombreux effets spéciaux peuvent être obtenus en utilisant du SVG comme le morphing ou autres.

Création d’interfaces et d’applications

Le SVG permet de créer des interfaces sophistiquées que vous pouvez intégrer avec du HTML5, des applications Web et des applications Internet riches.

Marius-sig

Auteur : Don Plumo