s v g introduction théorique © nova / grassioulet 5-6 mai 2002 tecfa staf2x scalable vector...

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 l’acceptation 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


• Portable Network Graphics (PNG)

– Format standard développé par le W3C

– 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

historique de SVG > PNG


• 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 :• 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

historique de SVG > graphisme vectoriel


• 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


– Role du W3C• 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 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 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 :– « 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


– 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 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 :– 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.

présentation de SVG > intro 2


– 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 JavaScript ;– 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

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 des designers, puisqu’une

plus grande liberté de création leur est possible



– 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



– 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 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

présentation de SVG > Problèmes liés à la technologie 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 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 d’indépendants du W3C

• 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 W3C 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 W3C

présentation de SVG > comment expliquer l’acceptation lente de SVG


– 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,

GoLive) 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, SimpleText..) ;– Éditeurs de code (Xemacs, HomeSite…) ;– Éditeurs XML (XML Spy…) ;– Éditeurs WYSIWYG (Dreanweaver, GoLive…).

• 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

présentation de SVG > Evolution du travail des graphistes et des développeurs


• Visualisation de contenu


Applications et future trends > visualisation de contenu


• Interfaces Utilisateurs (GUI)


Applications et future trends > interfaces utilisateurs


• Graphisme statique, animé et interactif


Applications et future trends > graphisme

s v g introduction théorique © nova / grassioulet 5-6 mai 2002 tecfa staf2x scalable vector...

Documents

svg svg

prsentation svg

mathml et svg

langage svg

svg permet

spcification svg

svg intro

svg png page