S V G introduction théorique © Nova / Grassioulet 5-6 mai 2002 TECFA staf2x Scalable Vector Graphics

6 - 7 mai(c) 2002 Nova / Grassioulet 2/5 Historique de la technologie « Scalable Vector Graphics » (SVG) –Portable Network Graphics (PNG) –Le graphisme vectoriel appliqué au Web –Scalable Vector Graphics (SVG) : une alternative à PNG 2.Présentation de SVG –Courte introduction –Avantages et problèmes liés à la technologie SVG –Comment expliquer lacceptation lente de SVG –Evolution du travail des infographistes et des développeurs 3.Applications & Future trends –Visualisation de contenu –Interfaces Utilisateurs (GUI) pour les applications Internet –Graphisme statique, animé et interactif introduction théorique > table des matières

6 - 7 mai(c) 2002 Nova / Grassioulet 3/5 Portable Network Graphics (PNG) –Format standard développé par le W3C –Technologie adoptée par lensemble des dernières générations de Browsers –Objectifs des PNG Remplacer le format GIF Respect des couleurs originelles de limage (true color) Amélioration de la qualité graphique des images Standardisation ISO historique de SVG > PNG

6 - 7 mai(c) 2002 Nova / Grassioulet 4/5 Le graphisme vectoriel appliqué au Web –Limites du format « bit-mapped » –Lapproche vectorielle : une alternative –Il existe 2 marchés identifiés pour les images vectorielles : La documentation technique pour les industries « Web CGM Profile » Linfographie du Web –Avantages : Excellentes capacités dadaptation au niveau du rendu correct des images Possibilités dappliquer des feuilles de style Possibilités dindexer le texte inclut dans les images Taille réduite de limage après décompression et qualité graphique Facilités dédition historique de SVG > graphisme vectoriel

6 - 7 mai(c) 2002 Nova / Grassioulet 5/5 Scalable Vector Graphics (SVG) : une alternative à PNG –Langage XML et standard W3C –Un format parfaitement adapté aux exigences du Web –Une technologie portable « Small mobile devices » (agendas électroniques, ordinateurs portables, téléphones portables…) « Office/personal computer monitors » « High resolution printers » –Avantages principaux : Insertion dans le monde XML/XHTML Possibilité de partager le code et de travailler directement sur le format Modèle de couleurs sophistiqué et utilisation de filtres comme dans Photoshop Spécification claire, en cours de standardisation Meilleures capacités graphiques que Flash historique de SVG > SVG : une alternative

6 - 7 mai(c) 2002 Nova / Grassioulet 6/5 –Role du W3C Un groupe de travail a été formé en août 1998, composé de développeurs venant dentreprises (Sun, HP, Adobe) ayant un intérêt particulier dans le graphisme Le premier brouillon de la spécification SVG 1.0 a été publié en février 1999 SVG a été candidat à la recommandation W3C en août 2000 et a été admis en septembre 2001 –Situation actuelle Un nouveau groupe de travail a été formé en juin 2001 afin de faire évoluer SVG vers des « devices » portables Le langage SVG 1.0 permet actuellement la création de 6 types dobjets graphiques : –Formes vectorielles (lignes et courbes) ; –Images ; –Application de gradients ; –Filtres ; –Composants réutilisables (symboles, texte…) Les objets graphiques peuvent être groupés, retouchés, transformés et mis en forme Les objets peuvent aussi être dynamiques et interactifs, grâce à DOM (« Document Object Model » – permettant une animation vectorielle via scripting) et à SMIL (syntaxe déclarative danimation qui peut être utilisée par les différents XML « Namespace ») Le langage SVG 1.1 qui est encore en cours de développement se divise en 2 profils : –« SVG Tiny » pour les petits « devices » comme les téléphones portables classiques ; –« SVG Basic » pour les agendas électroniques et les téléphones portables nouvelle génération. présentation de SVG > intro 1

6 - 7 mai(c) 2002 Nova / Grassioulet 7/5 –Situation actuelle (suite) Plusieurs groupes de travail du W3C travaillent aussi conjointement sur une validation de documents utilisant un mélange de plusieurs « Namespace » comme XHTML, MathML et SVG. Le premier brouillon a été publié le 30 avril Mozilla 0.9+ et Amaya 5.3+ sont déjà capables dinterpréter ce type de documents. Lintérêt de la communauté pour SVG commence à être considérable : –Bcp dentreprises ont déjà adopté la technologie dans leur système, ainsi que certains « viewers » intégrés à différentes plateformes ; –Des éditeurs WYSIWYG sont aussi disponibles, ainsi que des outils dauthoring ; –Des implémentations pour les « devices » portables sont en augmentation. présentation de SVG > intro 2

6 - 7 mai(c) 2002 Nova / Grassioulet 8/5 –Edition facilitée Contrairement au format.swf (Flash), celui de SVG permet un accès au code source du document, permettant un meilleur contrôle sur la présentation SVG est compatible avec dautres technologies –Comme avec « Synchronized Multimedia Integration Language » (SMIL), CSS ou JavaScript ; –Les effets indirects se situent au niveau dune baisse énorme de la courbe dapprentissage pour les développeurs. Avoir accès au code réduit les limitations dues aux éditeurs WYSIWYG –Contenu accessible aux moteurs de recherche Le contenu (texte) de SVG est inclut dans le code source de la page Web, ce qui permet une meilleure recherche dinformations –Localisation Limage et le contenu (texte) peuvent être converti facilement dans plusieurs langues Par exemple, un seul fichier dimage peut servir de template visuel pour les versions française, anglaise et allemande dun même graphique –Retouche du design Les styles graphique dune image ou dun site Web peuvent être modifié totalement en ne changeant quun seul fichier présentation de SVG > Avantages liés à la technologie SVG

6 - 7 mai(c) 2002 Nova / Grassioulet 9/5 –Open standard Certaines fonctionnalités supplémentaires (design et audio) peuvent être ajoutées comme dans certains SVG viewers –Effet bitmap sur le vectoriel Possibilités dappliquer des rendus Photoshop en temps réel sur des objets graphiques SVG, surtout au niveau des filtres spéciaux Ces effets peuvent être appliqués à un contenu dynamique, sans devoir le convertir en image bit-mapped (GIF) –Maîtrise des données Du fait du lien entre SVG et XML Accès libre au code Peu coûteux –Contrôle typographique SVG permet dutiliser des « fonts » spéciaux, sans lutilisation de plug-ins et indépendamment des caractéristiques du viewer Avantage énorme sur le plan esthétique des productions des designers, puisquune plus grande liberté de création leur est possible présentation de SVG > Avantages liés à la technologie SVG

6 - 7 mai(c) 2002 Nova / Grassioulet 10/5 –WYSIWYG Le rendu de limage à lécran est réellement celui que verra lutilisateur final Les designers peuvent faire varier la présentation du contenu, pour une optimisation maximale du temps de téléchargement, selon les caractéristiques du système de lutilisateur final présentation de SVG > Avantages liés à la technologie SVG

6 - 7 mai(c) 2002 Nova / Grassioulet 11/5 –SVG est une technologie récente Le W3C vient à peine de valider SVG comme une recommandation internationale (sept 2001) La légitimité du langage par la communauté prent souvent du temps, ce qui nest pas toujours un avantage pour la reconnaissance et lacceptation de SVG comme un langage standard de représentations graphiques –Nécessité dun plug-in pour la visualisation de SVG Dans lidéal, SVG devrait pouvoir être supporté par lensemble des browsers Certaines entreprises comme Adobe ou Real Network (Real Player) militent déjà en faveur dune adoption massive du standard SVG présentation de SVG > Problèmes liés à la technologie SVG

6 - 7 mai(c) 2002 Nova / Grassioulet 12/5 –Faire barrage à la logique de marché Au départ, plusieurs entreprises de software voulaient entrer en compétition, au niveau du développement dun standard pour les images vectorielles Cest pour cette raison que le W3C a préféré rassembler les développeurs, plutôt que de miser sur une logique de marché –Travail énorme de la communauté Pour permettre à un langage dêtre à la fois stable et reconnu par la communauté, il faut un travail collectif important, aussi bien au niveau des entreprises que du groupe dindépendants du W3C Nécessité dun échange constant dinformations et de feedbacks entre spécialistes, à travers s et forums –Batterie de tests Comme pour dautres technologies (HTML, XML, PNG), le W3C fait passer une série de tests qui prennent souvent beaucoup de temps La prise en compte des remarques dutilisateurs-testeurs ralentit aussi lacceptation finale des recommandations du W3C présentation de SVG > comment expliquer lacceptation lente de SVG

6 - 7 mai(c) 2002 Nova / Grassioulet 13/5 –Avantages pour les infographistes Meilleur contrôle de lapparence visuelle du contenu, à la fois à lécran et sur le Web. Ils peuvent ainsi être sûr du rendu final et de la qualité de leurs productions Plus grande possibilité de créativité Soutien inconditionnel dAdobe, dont la plupart des produits (Photoshop, Illustrator, GoLive) sont utilisés par les infographistes –Avantages pour les développeurs Structure et syntaxe familières, du fait quSVG soit une application XML, avec de grandes ressemblances avec HTML Nombre important doptions dédition et dauthoring –Éditeurs de Txt (Notepad, SimpleText..) ; –Éditeurs de code (Xemacs, HomeSite…) ; –Éditeurs XML (XML Spy…) ; –Éditeurs WYSIWYG (Dreanweaver, GoLive…). Indépendance par rapport à la plateforme, ce qui signifie quon peut créer des fichiers SVG aussi bien sur un PC 286, sur un Mac, voire même sur un Palm présentation de SVG > Evolution du travail des graphistes et des développeurs

6 - 7 mai(c) 2002 Nova / Grassioulet 14/5 Visualisation de contenu –Format standard développé par le W3C Applications et future trends > visualisation de contenu

6 - 7 mai(c) 2002 Nova / Grassioulet 15/5 Interfaces Utilisateurs (GUI) –Format standard développé par le W3C Applications et future trends > interfaces utilisateurs

6 - 7 mai(c) 2002 Nova / Grassioulet 16/5 Graphisme statique, animé et interactif –Format standard développé par le W3C Applications et future trends > graphisme