SVG 101: Qu'est-ce que SVG?

Bien qu'il ait été conçu à la fin des années 1990, SVG est à bien des égards le format de fichier «vilain petit canard» qui a grandi pour devenir un cygne. Mal pris en charge et largement ignoré pour la plupart des années 2000, depuis environ 2017, tous les navigateurs Web modernes ont rendu SVG sans problème sérieux, et la plupart des programmes de dessin vectoriel offrent la possibilité d'exporter SVG, qui est sans aucun doute devenu un format graphique largement utilisé sur le Web.

Cela n'est pas arrivé par hasard. Bien que les formats de fichiers graphiques raster traditionnels comme les JPG et les PNG soient parfaits pour les photographies ou les images très complexes, il s'avère que SVG est le format graphique qui répond le plus étroitement aux exigences actuelles du développement Web en matière d'évolutivité, de réactivité, d'interactivité, de programmabilité, de performances et d'accessibilité. .

Ce guide a été mis à jour en août 2020.

Alors, qu'est-ce que SVG et pourquoi devriez-vous l'utiliser?

SVG est un eXtensible Markup Language (XML) format graphique vectoriel pour le Web et d'autres environnements. XML utilise des balises comme HTML, bien qu'il soit plus strict. Vous ne pouvez pas, par exemple, omettre une balise de fermeture car cela rendra le fichier invalide et le SVG ne sera pas rendu.

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

Comme vous pouvez le voir, sous le capot, les documents SVG ne sont rien de plus 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 donne à SVG une flexibilité et une polyvalence qui ne peuvent jamais être égalées par les formats graphiques traditionnels PNG, GIF ou JPG.

SVG est une norme W3C ce qui signifie qu'il peut interagir facilement avec d'autres les langages et technologies standard ouverts, notamment JavaScript, DOM, CSS et HTML. Tant que le W3C établit les normes mondiales de l'industrie, il est probable que SVG restera la norme de facto pour les graphiques vectoriels dans le navigateur.

L'incroyable utilité du SVG est qu'il peut résoudre bon nombre des problèmes les plus épineux de la société moderne. développement web. Passons en revue certains 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 évolutif à l'infini. Si vous y réfléchissez, les instructions pour créer un cercle sont les mêmes que vous utilisiez un stylo ou un avion d'écriture du ciel. 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 à n'importe quelle taille.

En contraste , les formats raster tels que GIF, JPG et PNG ont des dimensions fixes, ce qui les rend pixélisés lorsqu'ils sont mis à l'échelle. Bien que diverses techniques d’image responsive se soient avérées utiles pour les graphiques en pixels, elles ne pourront jamais rivaliser avec la capacité de SVG à évoluer indéfiniment.

Programmabilité et interactivité

SVG est entièrement modifiable 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 sont basés sur du texte, donc lorsqu'ils sont incorporés dans une page Web, ils peuvent être recherchées et indexées. Cela les rend accessibles aux lecteurs d'écran, moteurs de recherche et autres appareils.

Performances

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 généralement plus petits que les formats de fichiers bitmap.

Cas d'utilisation courants et prise en charge des navigateurs

SVG a une avalanche de cas d'utilisation pratiques. Explorons les plus significatifs d'entre eux.

Illustrations simples et diagrammes

Tout dessin traditionnel qui se prête à être réalisé à l'aide d'un stylo et d'un crayon doit se traduire parfaitement au format SVG.

Logos et icônes

Logos et Les icônes doivent être claires et nettes quelle que soit leur taille – que ce soit la taille d'un bouton ou celle d'un panneau d'affichage – ce qui en fait des candidats idéaux pour SVG. De plus, les icônes SVG sont plus accessibles et sont beaucoup plus faciles à positionner.

Animations

Vous pouvez créer des animations attrayantes y compris des effets de dessin au trait sympas à l'aide de graphiques SVG . En fait, le code SVG peut interagir avec l'animation CSS, ainsi qu'avec JavaScript et sa propre fonctionnalité d'animation SMIL intégrée.

Interactivité (graphiques, graphiques, infographies, cartes)

SVG peut être utilisé pour tracer des données et mettre à jour il est basé dynamiquement sur les actions des utilisateurs ou d'autres événements. Voir Infographie SVG interactive et Carte routière interactive SVG .

Effets spéciaux

De nombreux effets en direct peuvent être obtenus en utilisant SVG, y compris morphing de forme 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 avec HTML5, des applications Web et des applications Internet riches (

Comme vous pouvez le voir, SVG est utilisé presque partout et dans d'innombrables situations. La bonne nouvelle à propos de tout cela est que la prise en charge des SVG par les navigateurs est excellente, comme vous pouvez le vérifier vous-même sur caniuse.com .

Vous savez maintenant ce que sont les SVG et pourquoi ils sont géniaux pour la toile. Dans la prochaine étape, je vous recommande de consulter l’article de Craig sur les différentes manières d’utiliser CSS avec SVG, et les moyens d’inclure des SVG dans une page Web et de les manipuler . Ou si vous voulez plonger profondément, consultez le livre Practical SVG de Chris Coyier.