Bien qu’il ait été conçu à la fin des années 1990, SVG est à bien des égards le format de fichier du « vilain petit canard » qui a grandi pour devenir un cygne. Mal supporté et largement ignoré pendant la majeure partie des années 2000, les choses ont changé depuis 2017. Tous les navigateurs web modernes rendent désormais le SVG sans problème, et la plupart des applications de dessin vectoriel offrent la possibilité de l’exporter. SVG est devenu un format d’image largement utilisé sur le Web.
Cela ne s’est pas produit par hasard. Bien que les formats de fichiers graphiques matriciels traditionnels comme les JPG et les PNG soient parfaits pour les photographies ou les images très complexes, il s’avère que le SVG est le seul format qui répond aux exigences actuelles du développement Web en matière d’évolutivité, de réactivité, d’interactivité, de programmabilité, de performances et d’accessibilité.
Voici une image en SVG. Avec ses 60 Ko, cette illustration peut être utilisée dans n’importe quel contexte en ligne. En tant que vecteur, nous pouvons être sûrs qu’elle s’adaptera aux exigences de n’importe quelle fenêtre ou largeur d’élément.
Bien entendu, les SVG peuvent être beaucoup plus petits que 60 Ko. Cette illustration plus grande nous aide à illustrer la flexibilité du SVG, mais c’est un format parfait pour les icônes et les éléments d’interface, dont certains ne pèsent même pas un kilooctet complet.
Qu’est-ce que le SVG ?
SVG est un format graphique vectoriel basé sur le langage XML (eXtensible Markup Language) pour le Web et d’autres environnements. Le XML utilise des balises comme le HTML, mais il est plus strict. Vous ne pouvez pas, par exemple, omettre une balise de fermeture car cela rendrait le fichier invalide et le SVG ne serait pas rendu.
Pour vous donner une idée de ce à quoi ressemble le code SVG, voici comment dessiner un cercle blanc avec une bordure noire :
cercle cx="100" cy="100" r="50" largeur de trait="4" trait="#000" remplissage="#fff" />
Comme vous pouvez le constater, sous le capot, les documents SVG ne sont rien d’autre que de simples fichiers de texte brut qui décrivent des lignes, des courbes, des formes, des couleurs et du texte. Comme il est lisible par l’homme, facilement compréhensible et modifiable, lorsqu’il est intégré dans un document HTML en tant que SVG en ligne, le code SVG peut être manipulé via CSS ou JavaScript. Cela confère à SVG une flexibilité et une polyvalence que ne pourront jamais égaler les formats graphiques traditionnels PNG, GIF ou JPG.
SVG est une norme du W3C, ce qui signifie qu’il peut interagir facilement avec d’autres langages et technologies standard ouverts, notamment JavaScript, DOM, CSS et HTML. Tant que le W3C définira les normes industrielles mondiales, il est probable que le format SVG restera la norme de facto pour les graphiques vectoriels dans le navigateur.
Qu’en est-il de Canvas de HTML5 ? Ces deux technologies sont très différentes, mais il est compréhensible que cette question revienne souvent. Nous avons analysé les objectifs, les avantages et les inconvénients de chacune dans SVG vs Canvas afin que vous puissiez faire le bon choix à chaque fois.
Pourquoi utiliser SVG ?
La particularité de SVG est qu’il peut résoudre un grand nombre des problèmes les plus épineux du développement web moderne. Passons en revue quelques-uns d’entre eux.
Évolutivité et réactivité
Sous le capot, SVG utilise des formes, des nombres et des coordonnées plutôt qu’une grille de pixels pour rendre les graphiques dans le navigateur, ce qui le rend indépendant de la résolution et infiniment évolutif. Si vous y pensez, les instructions pour créer un cercle sont les mêmes, que vous utilisiez un stylo ou un avion à écrire. Seule l’échelle change.
Avec SVG, vous pouvez combiner différentes formes, chemins et éléments de texte pour créer toutes sortes de visuels, et vous serez sûr qu’ils seront clairs et nets quelle que soit leur taille.
En revanche, les formats matriciels comme GIF, JPG et PNG ont des dimensions fixes, ce qui entraîne une pixellisation lorsqu’ils sont mis à l’échelle. Bien que diverses techniques d’image réactive se soient avérées utiles pour les graphiques en pixels, elles ne pourront jamais vraiment rivaliser avec la capacité de SVG à s’adapter indéfiniment.
Programmabilité et interactivité
SVG est entièrement éditable et scriptable. Toutes sortes d’animations et d’interactions peuvent être ajoutées à un graphique SVG en ligne via CSS et/ou JavaScript.
Accessibilité
Les fichiers SVG étant basés sur du texte, ils peuvent être recherchés et indexés lorsqu’ils sont intégrés dans une page Web. Ils sont donc accessibles aux lecteurs d’écran, aux moteurs de recherche et à d’autres dispositifs.
Performances
L’un des aspects les plus importants ayant un impact sur les performances du web est la taille des fichiers utilisés sur une page web. Les graphiques SVG sont généralement plus petits que les formats de fichiers bitmap.
Cas d’utilisation courants de SVG et support des navigateurs
SVG a une avalanche de cas d’utilisation pratiques. Explorons les plus significatifs d’entre eux.
Illustrations et diagrammes simples
Tout dessin traditionnel qui se prête à être produit à l’aide d’un stylo et d’un crayon devrait se traduire parfaitement dans le format SVG.
Logos et icônes
Les logos et les icônes doivent être clairs et nets, quelle que soit leur taille – qu’il s’agisse de la taille d’un bouton ou de celle d’un panneau d’affichage – ce qui en fait des candidats idéaux pour le format SVG. En outre, les icônes SVG sont plus accessibles et beaucoup plus faciles à positionner.
Animations
Vous pouvez créer des animations attrayantes, y compris des effets de dessin au trait, en utilisant des graphiques SVG. En fait, le code SVG peut interagir avec les animations CSS, ainsi qu’avec JavaScript et sa propre fonctionnalité d’animation SMIL intégrée.
Interactivité (diagrammes, graphiques, infographies, cartes)
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 le SVG, notamment le morphing de formes ou différents effets gluants.
Création d’interfaces et d’applications
SVG vous permet de créer des interfaces sophistiquées que vous pouvez intégrer à HTML5, aux applications Web et aux applications Internet riches (RIA).
Comme vous pouvez le constater, SVG est utilisé presque partout et dans d’innombrables situations. La bonne nouvelle dans tout cela, c’est que la prise en charge de SVG par les navigateurs est excellente !
