Les avantages du Scalable Vector Graphics (SVG)

Dans cet article, tout tourne autour du format de fichier SVG. Cela ressemble à un nom de parti ou d’association, mais il s’agit de l’abréviation de Scalable Vector Graphics (SVG).

Auteur Joely Tafanalo
Date 02.08.2017
Temps de lecture 4 Minutes

SVG Official LogoDans cet article, tout tourne autour du format de fichier SVG. Cela ressemble à un nom de parti ou d’association, mais il s’agit de l’abréviation de Scalable Vector Graphics (SVG). Lors de mes formations et présentations, j’ai remarqué que beaucoup trop d’éditeurs ignorent encore ce qu’est le SVG ou ne l’utilisent pas. Ce blog doit permettre d’y remédier.

Ce format a déjà été publié en 2001. Il est issu des langages de formatage (VML et PGML) présentés au World Wide Web Consortium (W3C) à la fin des années 90. Grâce au web moderne, ce format qui avait été un peu oublié est plus que jamais d’actualité. Pour simplifier, le SVG représente pour les graphiques ce que l’HTML représente pour les textes. On ne devrait définitivement plus voir de logos un peu flous (JPG, 72 ppi) sur les écrans à haute résolution.

e panneau d’exportation d’AI pour le SVG et d’autres formats du web
Le panneau d’exportation d’AI pour le SVG et d’autres formats du web

Les graphiques vectoriels 2D

Que ce soit pour les logos d’entreprise ou les diagrammes des projets sur support papier, chaque éditeur travaille régulièrement avec des graphiques vectoriels. Il existe une grande série de programmes permettant de créer et d’éditer des graphiques redimensionnables. Dans la pratique, on emploie toutefois le plus souvent Adobe Illustrator CC 2017 ou les programmes libres Inkscape et Scribus. Mis à part leurs formats de fichier propriétaires, ils ont en commun le format d’échange EPS et la gestion des SVG.

Les éléments graphiques au format SVG sont utilisés dans les interfaces avec les utilisateurs et dans les applications des sites web modernes. Un fichier SVG est par exemple employé lors d’une copie depuis Photoshop ou Illustrator (en passant par le presse-papier) vers Adobe Experience Design.

De même, Photoshop peut désormais copier ou exporter directement des graphiques vectoriels en SVG.
De même, Photoshop peut désormais copier ou exporter directement des graphiques vectoriels en SVG.

Les graphiques vectoriels animés

Par le passé, les illustrations placées dans les navigateurs ont toujours été animées au moyen de la technologie propriétaire Flash. Le fait qu’un fichier SVG est en fait un document XML avec une structure arborescente comportant des éléments et des attributs laisse cependant entrevoir de toutes nouvelles possibilités d’animation.

Les avantages déjà reconnus dans la publication sur support imprimé s’imposent aussi à l’écran: le redimensionnement sans perte d’information en utilisant une faible quantité de données.

Avec le soutien des CSS et/ou de Javascript, les fichiers SVG génèrent des interactions et des animations captivantes. Elles sont bien sûr en conformité avec l’HTML 5. Le rêve d’obtenir des infographies guidées par les données, adaptables et vectorisées est à portée de main. Il faut aussi mentionner que Google prend en compte le format graphique SVG dans ses recherches depuis sept ans.

Adobe Animate CC 2017 est un outil WYSIWYG pour les animations vectorielles..

Conclusion

Plus les standards du web (HTML5, CSS, JS) et la publication indépendante des supports deviennent importants, plus il est conseillé de donner une chance au bon vieux format SVG.


A propos de l'auteur

Joely Tafanalo

Joely Tafanalo est designer ES en communication et interaction indépendant, typographe qualifié et producteur multimédia. En tant que formateur pour Creative Cloud, il agit auprès d’entreprises et de centres de formation. Depuis 2015, il est à la tête du pôle de formation « Publishing » chez Digicomp.