© nova / grassioulet 6-7 mai 2002 tecfa staf2x scalable vector graphics s v g introduction...

© Nova / Grassioulet

6-7 mai 2002

TECFA staf2x

Scalable Vector Graphics

S V G introduction théorique

6 - 7 mai (c) 2002 Nova / Grassioulet 2/41

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


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


– 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

Adobe, Apple, AutoDesk, Bit-Flash,Corel, HP, IBM, ILOG, Inso, Kodak,Macromedia, Microsoft, Netscape, Oasis,Open Text, Oxford University, Quark,RAL, Sun, W3C and Xerox…


– 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


• Introduction

– 4 piliers : sélection, organisation, quantité et présentation de l’information scientifique dans des domaines comme l’éducation, la psychologie, la médecine, les sciences appliquées, les sciences informatiques, l’économie, l’ingénierie industrielle, la cartographie…

– Le graphisme d’information, c’est communiquer des informations objectives avec efficacité et exactitude. L’esthétique, la présentation ne doivent pas la déformer. A l’inverse du graphisme publicitaire/marketing ;

– 3 catégories dans le graphisme d’information• agencement organisé (informer le voyageur : signalétique, carte routière,

indicateur horaire…) ;• explication du fonctionnement (guides d’installation/fabrication, diagrammes,

modes d’emploi, photomontages…) ;• contrôle des données enregistrées (design de cockpit, tableaux de

commandes…).

SVG Applications & future trends > visualisation de contenu > intro


• Introduction

– 2 modes complémentaires de présentation sont utilisés grâce à l’évolution des technologies : le numérique (représentation précise et chiffrée) et l’analogique (représentations isotype, diagrammes à barres/circulaires, visualisation de processus, cartes cognitives…) ;

– Le graphisme d’information va jouer un rôle majeur dans les prochaines décennies :

• Meilleure structuration de l’information ;• Réponse à un besoin croissant de sélection et de tri de la part du public ;• D’autres formes de modèles visuels vont être développé, en fonction des besoins

des médias interactifs.

– Selon O. Neurath, le graphiste est l’intermédiaire entre le chercheur (historien, économiste, sociologue, scientifique…) et son public ;

SVG Applications & future trends > visualisation de contenu > intro


• Atlas of Cyberspace (Dodge & Kitchin, 2001)

– Issues to consider when viewing images :

• Why was the map or spatialization created ?• Does the map or spatialization change the way we think about, and interact with

cyberspace ?• To what extend does the map or spatialization accurently reflect the data ?• Is the map or spatialization interpretable ?• How valid and reliable are the data used to construct the map or spatialization ?• Is the map or spatialization ethical ?

– The power of mapping :

• spatial mode of communication which defines how we interact with data• significant educational value, eventhough maps as authored collections of

information can convey lies and ideological blindness. It is then relevant to know the purpose of spatialization – Who it was made for ? By whom ? Why it was produced ? What are the implications of its message and use ?

SVG Applications & future trends > visualisation de contenu > atlas cyberspace


– The power of mapping (suite)

• Understanding communicative properties of a map depends on the level of user knowledge

• Designing a map means considering issues such as (all these aspects have significant affect on how data is portrayed and interpreted) :

– Projection– Scale – Classification– Graphic styles of symbols– Colors– Labelling– Fonts– usability

• Understanding communicative properties of a map depends on the level of user knowledge

• Given the fast-growing and dynamic nature of both infrastructure and cyberspace, the issue of data quality and availability is of critical importance

SVG Applications & future trends > visualisation de contenu > atlas cyberspace


– The power of mapping (suite)

• Ethics and responsibility of researchers producing maps too, because the act of mapping itself may constitute an invasion of privacy. Here some questions to ask about the data quality and availability :

– What is the age of the dataset ?– Where did the data come from ?– How accurate are positional and attribute features ?– Do the data seem logical and consistent ?– In what format are the data kept ?– Hoe were the data checked ?– Why where the data compiled ?– What is the reliability of the data provider ?

• For example, cartography provides a means by which to classify, represent and communicate information, providing understanding and aiding navigation

SVG Applications & future trends > visualisation contenu > atlas of cyberspace


– Mapping applications

• Mapping infrastructure and traffic– Fiber-optic cables and satellites maps– Domain name maps– Marketing maps of Internet service providers– Interactive mapping of networks– Interactive network mapping tool (Plankton, Lumeta, Walrus)– Geography of data flows– Geography of Internet users

• Mapping the Web– Mapping individual Websites (Dynamic Diagrams, MyBody, Inxight)– Mapping tools to manage Websites (Dynamic Diagram)– Mapping Website evolution– Mapping paths and traffic trough a Website (VISVIP, Valence, Anemone)– 2D visualization and navigation of the Web : “A view from above” (Self-Organizing Map)– 3D visualization and navigation of the Web : “A view from within” (Lufthansa Systems

Network, Visual Thesaurus, Domain Visualization)


http://www.geom.umn.edu/~worfolk/SaVi/

http://www.caida.org/tools/visualization/mapnet/Backbones/

http://www.caida.org/tools/visualization/plankton/Images/

http://www.lumeta.com/graphics/map-link.html

http://www.caida.org/tools/visualization/walrus/

http://www.zooknic.com/Users/index.html

http://www.dynamicdiagrams.com/sitemap/sitemap.html

http://www.altx.com/thebody/

http://www.inxight.com/

http://www.dynamicdiagrams.com/all_pdfs/brochure.pdf

http://www.itl.nist.gov/iaui/vvrg/cugini/webmet/visvip/pix/simp-vv-2.gif


– Mapping applications

• Mapping conversation and community– Email– Mailing lists (VisualWho) and bulletin boards– Usenet (Conversation Map)– Chat (Chat Circles)– MUDs– Virtual Worlds (Active Worlds)– Game space (EverQuest, UltimaOnline)

• Imagining cyberspace– Science fiction visions of cyberspace– Cinematic visions of cyberspace (Warriors of the Net)– Artistic imaginings : subversive surfing and warping the Web (Tendril)– Imagining the architecture of cyberspace (Novak, Matsumoto)



– Final Thoughts for futher developments

• To explore real-time mapping, using dynamically generated data• To develop spatially-referenced and temporal data sources• To ensure data are standardized• To produce informative meta-data about data• To establish how easy a map can be interpreted• To test the usability of spatialization• To study the effects of spatialization on the media mapped• To establish collaborative links between disparate research labs working

on related themes• To appreciate and account for ethical and privacy implications of mapping

cyberspace• To examine the effects of the social context within which mapping takes

place• To extand the coverage of maps and information spatialization



• Exemple d’application : la cartographie (1/17)

– Les approches existantes en matière de format vectoriel pour le Web

• Simple Vector Format (SVF)– permet la diffusion de dessins CAD sur le Web depuis 1996, date de sortie du plug-in ;– L’interactivité est limitée.

• Drawing Web Format (DWF)– Visualisation avec le plug-in WHIP4 d’AutoDesk, un des rares plug-in qui réponde à

JavaScript ;– Possibilité d’insertion d’images et de texte ;– Aucune fonction d’animation disponible.

• Flash (SWF)– Format vectoriel permettant l’interactivité la plus largement diffusée ;– Supporté par les browsers grâce à un plug-in Macromedia ;– Format propriétaire binaire, qui s’oppose à l’open source (SVG) ;– Élaboré pour les besoins des publicitaires et de l’industrie du multimédia. Début 2000,

environ 70% des navigateurs supportent Flash ;– Insertion d’images, de texte, de vidéos, de sons et d’animations ;– Problèmes pour les cartographes : intégrer des données externes, rééditer ou créer les

fonctions dont ils ont besoin. Des interfaces ont été développées mails elles ne sont pas standardisées.

SVG Applications & future trends > visualisation de contenu



– Les approches existantes en matière de format vectoriel pour le Web (suite)

• Precision Graphic Markup Language (PGML)– Ensemble de spécifications pour un format texte vectoriel 2D, proposé par Adobe– Généré en convertissant PDF– Haut niveau d’interactivité, mais pas encore d’applications

• Web Computer Graphic Metafile (WebCGM)– Recommandation du W3C, norme mature– Syntaxe riche consacrée aux hyperliens– Visualisation limitée aux dessins techniques et scientifiques

• Vector Markup Language (VML)– Format texte vecoriel 2D développé par Microsoft– Conçu pour Internet Explorer– Pas de nouveaux développement depuis 1998– Syntaxe intéressante, mais pas d’applications





• Portable Document Format (PDF)– Format natif d’Adobe Illustrator– À l’origine pas été conçu pour le Web– Format binaire qui ne permet pas un traitement efficace par les moteurs de recherche

• Scalable Vector Graphics (SVG)– Nouveau standard ouvert, recommandé par le W3C– Offre tous les avantages de Flash, d’XML, des CSS, des fontes incorporés– Interactivité et animation– Compatible avec HTML grâce à DOM

• Virtal Reality Modeling Language (VRML)– Destiné à la représentation 3D, mais aussi utilisable pour la 2D– Grande complexité pour les représenations simples– Plug-in nécessaire– En phase de restructuration





• Hyper Graphic Markup Language (HGML)– Format compact adapté aux faibles bandes passantes– Depuis juin 1998– Aucune réalisation

• DrawML – Format qui facilite la représentation et la mise-à-jour de dessins techniques– Depuis décembre 1998

– Les API 2D associées à des applets ou des objets ActiveX

• ActiveX– Permet d’utiliser des objets écrits en Visual Basic (Micrpsoft)– Besoin de kits de développement– Interactivité possible




– Les API 2D associées à des applets ou des objets ActiveX (suite)

• Java2D– Programme binaire permettant d’afficher un graphique en 2D (Sun et Adobe)– Inséré dans les pages Web– Flexible et modifiable– Indépendant d’une plateforme unique– Même possibilités graphiques que SVG (la plupart des SVG viewers et des plug-in sont écrits

en Java)– Interactivité programmable avec des outils type bibliothèque de ressources (bases de

données, interface utilisateurs, graphisme 2D et 3D, multimédia, réseaux, télécommunications)

– Applets peuvent gérer les plug-in SVG

– Le Document Object Model (DOM)

• La plupart des formats vectoriels mentionnés nécessitent des plug-in, ce qui ne correspond pas au principe de source ouverte de l’Internet




– Le Document Object Model (suite)

• Les formats binaires ne peuvent être édités et corrigés sans le programme d’origine

• N’iporte quel projet de carte Web requiert cette capacité, afin de pouvoir intégrer de nouveaux éléments (données, analyses, sélections, symboles)

• L’interactivité exige que les éléments individuels d’une page Web soient manipulables, y compris les objets vectoriels

• Besoin d’une hiérarchie d’objets, dont la racine est la page Web

• Besoin d’une norme vectorielle qui fonctionne avec le DOM, si possible sans plug-in




– Extensible Markup Language (XML) : la base fondamentale de tous les futurs dialectes du WWW

• Réponse aux lacunes de HTML – distinction entre contenu, structure et présentation, méta-informations

• Interface et syntaxe standardisée permettant l’accessibilité aux objets via le DOM

• Indépendance maximale par rapport aux réseaux et aux plate-formes

• Base de tous les nouveaux dialectes spécialisés– SMIL (Multimédia)– SVG (graphisme vectoriel)– MathML (mathématique)– X3D (graphisme 3D)– XHTML (successeur de HTML )– XForm (formulaires)– Geography Markup Language (DTD et données XML)– Chemie Markup Language (DTD et données XML)




– Principes d’interprétation du SVG pour l’affichage

• Les viewers SVG utilisent des calques

• L’ordre d’affichage correspond à l’ordre des objets dans le fichier, groupement possible

• Prise en compte de la localisation et de l’opacité des objets

• Fonctions intégrées du zoom et du panoramique




– Systèmes de coordonnées et transformations

• SVG utilise un système cartésien, dont l’origine est le coin supérieur gauche de l’objet

• Pour représenter une carte, l’axe des ordonnées doit être inversé

• Utilisation d’une opération matricielle 3x3

• Transformations géométriques (translation, changement d’échelle, rotation, section)

– Feuilles de styles (CSS)

• Permettent aux cartographes d’administrer et de modifier des projets importants en modifiant les caractéristiques des objets :

– Couleurs– Motifs de remplissage– Contours– Propriétés de textes– Position des objets




– Feuilles de styles (suite)

• Compatible avec SVG et HTML/XHTML

• Hiérarchie des éléments impose un système d’héritage qui peut s’appliquer aux groupes, et aux sous-groupes

– Éléments géométriques de base

• Rectangle, cercle, ellipse, ligne, polyligne, polygone

• Notion de chemin (path)

• Paramètres supplémentaires, comme l’arrondi des coins




– Éléments géométriques de base

• Rectangle, cercle, ellipse, ligne, polyligne, polygone

• Notion de chemin (path)

• Paramètres supplémentaires, comme l’arrondi des coins

• Applications de kevlindev.com :– 2D Math objects– set of math-oriented JavaScript objects used to edit SVG elements in 2D– Shape Editors– set of JavaScript objects used to edit SVG geometric shape elements in 2D– Utilities– set of JavaScript utility objects– Widgets– set of experimental SVG GUI widgets

– Découpe (clip) et masque




– Contenu (texte)

• Famille de fonte, type de fonte, taille, position, largeur, direction, inclinaison…

• Alignement du texte sur le « path »

• Indexé par les moteurs de recherche

• Problèmes liés au « viewport »

– Couleurs, remplissage, dégradé, transparence, types de ligne




– Interactivité, script

• Les fonctions interactives d’un viewer SVG :– Zoom– Panoramique– Retour à la vue initiale– Lissage (anti-aliasing)

• Le plug-in d’Adobe projette de pouvoir sélectionner un pointeur parmi un ensemble prédéfini, comme du texte ou des images

• Possibilités d’affecter des fonctions à des touches, comme la mesure de distance et de surface

• Hyperliens de type HTML, pouvant aussi pointer vers des vues pré-définies ou des animations

• SVG reconnaît 3 catégories d’événements (qui peuvent être combinés) :– Souris– Clavier– Changements d’état (état du chargement et de l’affichage du fichier SVG)




– Interactivité, script (suite)

• Des événements complexes peuvent être élaborés en combinant des scripts et des applets/servlets Java

• JavaScript permet d’avoir accès à tous les éléments du DOM, mis à part quelques domaines qui ne sont pas implémentés dans le plug-in

• Les applications cartographiques :– Affichage/masquage d’objets– Modification des attributs graphiques– Réaction aux événements de souris (mouseOver)– Liaison de fenêtres (combinaison de vues)– Déplacement interactif– Modification de l’échelle– Rotation d’éléments– Création de petits programmes (sauvegarde des données sur le serveur)– Liaison avec des bases de données grâce aux scripts CGI et aux applets Java (traitement des

données)




– Animation

• Des animations simples étaient possibles avec du HTML, complété par CSS et JavaScript. Si un objet doit être déplacé de A vers B, toutes les étapes intermédiaires doivent être pré-définies

• La syntaxe d’animation de SVG est liée à celle de SMIL, qui peut déterminer les paramètres temporels d’une animation :

– Début, souvent dépendant d’un événement– Durée– Fin– Nombre de répétition– Attributs intégrés (couleur, position, path, rotation, échelle…)– Ligne de temps métaphorique, permettant de définir l’apparition d’images-clés à un

temps t– Options d’interpolation entre 2 images-clés

» Pas-à-pas» Interpolation linéaire (par défaut)» Interpolations mathématiques complexes




– Metadata et eXtensibilité

• Description des documents de façon structurée (SVG ou JavaScript) :– Auteur– Date de publication– Version – Titre – Description…

• SVG permet de réutiliser et transformer des éléments identifiés (ID) ou des groupe d’objets, comme dans VRML. En cartographie, cette fonctionnalité permet le placement de symboles ou de pictogrammes

• eXtensibilité des balises, comme avec toutes les spécifications compatibles DOM/XML




– Exportation vers SVG

• 3 possibilités pour générer du SVG (qui peuvent être combinées) :– Logiciel de dessin– Publication assistée par ordinateur (PAO)– SIG

• SVG permet de réutiliser et transformer des éléments identifiés (ID) ou des groupe d’objets, comme dans VRML. En cartographie, cette fonctionnalité permet le placement de symboles ou de pictogrammes

• eXtensibilité des balises, comme avec toutes les spécifications compatibles DOM/XML



• Graphisme statique, animé et interactif

– Une comparaison entre Flash .swf (pas basé sur XML, format propriétaire, pas contextuel) et .svg (compact, scalable, contextuel, réductible)

• http://www.carto.net/papers/svg/comparaison_flash_svg.html

– SVG mapping• http://www.vbxml.com/xsl/articles/interfaces/

• Future trends

– SVG est impressionnant et encore nouveau-né (soutien actif du W3C et des entreprises)

– Tous les browsers pourront supporté SVG sans plug-in (Netscape et Microsoft s’investissent aussi dans l’authoring des spécifications)

SVG Applications & future trends > graphisme


• Future trends (suite)

– Évolution des interfaces utilisateurs (GUI) dans le sens « document-centric » et « user-centric »

• Limitations dues à XHTML, en tant que fondation des GUIs

• Plus grande esthétique dans la navigation grâce au graphisme vectoriel

• Meilleure portabilité entre plateformes

• Économie en temps de chargement et en mémoire

• Visualisation des données en temps réel :– Systems control panel– Stock market analyser

• Environnements de jeux :– Mélange entre des interfaces utilisateurs 2D et des moteurs 3D– SVG pourrait être utilisé avec d’autres technologies comme le 3DML

SVG Applications & future trends > interfaces utilisateurs


• Future trends (suite)

• Outils visuels, « drag and drop integrated development environments » (IDEs)

• Animation servant le graphisme d’information

– Développement d’applications Internet et Intranet• Art• Web design• E-learning• Portail d’information• E-commerce (B2B, B2C)

SVG Applications & future trends > interfaces utilisateurs

© nova / grassioulet 6-7 mai 2002 tecfa staf2x scalable vector graphics s v g introduction...

Documents