Catégories
Astuces et Design

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 la toile.

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 aux exigences actuelles du développement Web en matière d'évolutivité, de réactivité, d'interactivité, de programmabilité, de performances et d'accessibilité. .

En-tête SVG 101

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 format graphique vectoriel basé sur le langage XML (eXtensible Markup Language) 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 une 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 au 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 langages et technologies standard ouverts, notamment JavaScript, DOM, CSS et HTML. Tant que le W3C définit les normes mondiales de l'industrie, il est probable que SVG continuera à être la norme de facto pour les graphiques vectoriels dans le navigateur.

L'avantage de SVG est qu'il peut résoudre bon nombre des problèmes les plus épineux du développement Web moderne. 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 quelle que soit leur taille.

En revanche, les formats raster tels que GIF, JPG et PNG ont des dimensions fixes, ce qui les rend pixélisés lors de leur mise à 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 à é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és et indexés. Cela les rend accessibles aux lecteurs d'écran, aux moteurs de recherche et à d'autres appareils.

Performance

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 fichier bitmap.

Cas d'utilisation courants et prise en charge du navigateur

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

Illustrations simples et schémas

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

Logos et icônes

Les logos et les icônes doivent être clairs et nets, 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 le SVG. De plus, 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 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 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 en direct peuvent être obtenus en utilisant SVG, y compris le 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 (RIA).

Comme vous pouvez le voir, SVG est utilisé presque partout et dans d'innombrables situations. La bonne nouvelle à propos de tout cela est que le support du navigateur pour SVG est excellent, 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 le Web. Dans la prochaine étape, je vous recommande de consulter l'article de Craig sur les différentes façons d'utiliser CSS avec SVG, et les façons d'inclure des SVG dans une page Web et de les manipuler. Ou si vous voulez plonger profondément, consultez le livre SVG pratique, par Chris Coyier.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *