SVG introduction thorique Scalable Vector Graphics TECFA 5

SVG introduction théorique Scalable Vector Graphics TECFA 5 -6 mai 2002 6 - 7

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

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

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

historique de SVG > SVG : une alternative • Scalable Vector Graphics (SVG) : une alternative à PNG – Langage XML et standard W 3 C – 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 : • • • 6 - 7 mai 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 (c) 2002 Nova / Grassioulet 5

présentation de SVG > intro 1 – Role du W 3 C • Un groupe de travail a été formé en août 1998, composé de développeurs venant d’entreprises (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 W 3 C 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 d’objets 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 d’animation 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 : – – 6 - 7 mai « 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. (c) 2002 Nova / Grassioulet 6

présentation de SVG > intro 2 – Situation actuelle (suite) • Plusieurs groupes de travail du W 3 C travaillent aussi conjointement sur une validation de documents utilisant un mélange de plusieurs « Namespace » comme XHTML, Math. ML et SVG. Le premier brouillon a été publié le 30 avril 2002. Mozilla 0. 9+ et Amaya 5. 3+ sont déjà capables d’interpréter ce type de documents. • L’intérêt de la communauté pour SVG commence à être considérable : – – – 6 - 7 mai Bcp d’entreprises 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 d’authoring ; Des implémentations pour les « devices » portables sont en augmentation. (c) 2002 Nova / Grassioulet 7

présentation de SVG > Avantages liés à la technologie SVG – 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 d’autres technologies – – Comme avec « Synchronized Multimedia Integration Language » (SMIL), CSS ou Java. Script ; Les effets indirects se situent au niveau d’une baisse énorme de la courbe d’apprentissage 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 d’informations – Localisation • L’image et le contenu (texte) peuvent être converti facilement dans plusieurs langues • Par exemple, un seul fichier d’image peut servir de template visuel pour les versions française, anglaise et allemande d’un même graphique – Retouche du design • Les styles graphique d’une image ou d’un site Web peuvent être modifié totalement en ne changeant qu’un seul fichier 6 - 7 mai (c) 2002 Nova / Grassioulet 8

présentation de SVG > Avantages liés à la technologie SVG – 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 d’appliquer 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 d’utiliser des « fonts » spéciaux, sans l’utilisation de plug-ins et indépendamment des caractéristiques du viewer • Avantage énorme sur le plan esthétique des productions designers, puisqu’une plus grande liberté de création leur est possible 6 - 7 mai (c) 2002 Nova / Grassioulet 9

présentation de SVG > Avantages liés à la technologie SVG – WYSIWYG • Le rendu de l’image à l’écran est réellement celui que verra l’utilisateur 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 l’utilisateur final 6 - 7 mai (c) 2002 Nova / Grassioulet 10

présentation de SVG > Problèmes liés à la technologie SVG – SVG est une technologie récente • Le W 3 C 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 n’est pas toujours un avantage pour la reconnaissance et l’acceptation de SVG comme un langage standard de représentations graphiques – Nécessité d’un plug-in pour la visualisation de SVG • Dans l’idéal, SVG devrait pouvoir être supporté par l’ensemble des browsers • Certaines entreprises comme Adobe ou Real Network (Real Player) militent déjà en faveur d’une adoption massive du standard SVG 6 - 7 mai (c) 2002 Nova / Grassioulet 11

présentation de SVG > comment expliquer l’acceptation lente de SVG – Faire barrage à la logique de marché • Au départ, plusieurs entreprises de software voulaient entrer en compétition, au niveau du développement d’un standard pour les images vectorielles • C’est pour cette raison que le W 3 C 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 d’indépendants du W 3 C • Nécessité d’un échange constant d’informations et de feedbacks entre spécialistes, à travers emails et forums – Batterie de tests • Comme pour d’autres technologies (HTML, XML, PNG), le W 3 C fait passer une série de tests qui prennent souvent beaucoup de temps • La prise en compte des remarques d’utilisateurs-testeurs ralentit aussi l’acceptation finale des recommandations du W 3 C 6 - 7 mai (c) 2002 Nova / Grassioulet 12

présentation de SVG > Evolution du travail des graphistes et des développeurs – Avantages pour les infographistes • Meilleur contrôle de l’apparence 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 d’Adobe, dont la plupart des produits (Photoshop, Illustrator, Go. Live) sont utilisés par les infographistes – Avantages pour les développeurs • Structure et syntaxe familières, du fait qu’SVG soit une application XML, avec de grandes ressemblances avec HTML • Nombre important d’options d’édition et d’authoring – – Éditeurs de Txt (Notepad, Simple. Text. . ) ; de code (Xemacs, Home. Site…) ; XML (XML Spy…) ; WYSIWYG (Dreanweaver, Go. Live…). • Indépendance par rapport à la plateforme, ce qui signifie qu’on peut créer des fichiers SVG aussi bien sur un PC 286, sur un Mac, voire même sur un Palm 6 - 7 mai (c) 2002 Nova / Grassioulet 13