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).
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). 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.
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.
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.