2. Scalable Vector Graphics - un nouveau paradigme

2.1 Origine et but

SVG traduit: Graphiques Vectoriels Adaptables
SVG est un standard W3C (en XML) et s’intègre bien aux autres formats W3C.
http://www.w3.org/TR/SVG/

De la spécification: "SVG est un langage de description de graphiques bi-dimensionnels en XML. SVG admet trois types d’objets graphiques : des contours graphiques vectoriels (par exemple, des tracés consistant en lignes droites et courbes), des images et du texte. Les objets graphiques peuvent être regroupés, stylés, transformés et composés dans des objets précédemment rendus. L’ensemble de fonctions comprend des transformations imbriquées, des tracés de rognage, des masques basés sur la couche alpha et des objets de gabarit.

Les dessins SVG peuvent être interactifs et dynamiques. On peut définir et déclencher des animations, soit déclarativement (i.e., en incorporant les éléments d’animation SVG dans un contenu SVG), soit via un script.

Utilisations les plus intéressantes (actuellement):

visualisation de contenus (économiques, processus, cartes, etc.)
interface utilisateurs pour certains types d’applications Internet
dessins statiques, animés ou même interactifs dans le monde de l’éducation
animations multimédia de contenus formalisables (chimie, maths, etc.)

2.2 Pourquoi SVG ?

Avantages de "vector graphics"

rendering correct dans multiples média et à différentes tailles (adaptation)
possibilité d’appliquer des styles (adaptation 2)
possibilité d’indexer le texte qui fait partie du graphisme
taille de l’image (après compression en tout cas)
facilités d’édition: les éléments sont des objets, hierarchies, etc.

Avantages particuliers de SVG (par rapport à Flash et similaires)

insertion dans le monde XML/XHTML

génération de SVG avec XSLT/PHP etc. à partir de données XML
Intégration dans XHTML, viewers SMIL etc.
utilisation de CSS
scriptable avec JavaScript via DOM (standard)

possibilité de partager du code, de travailler directement avec le format
modèle de couleurs sophistiqué, filtres comme dans photoshop
une spécification assez claire
meilleurs capacités graphiques dans l’ensemble, voir:
http://www.carto.net/papers/svg/comparison_flash_svg.html

2.3 Outils

Validation on-line:

http://validator.w3.org /

Viewers:

Navigateurs Firefox 1.5+, Opéra 9+ ou Safari 3+
On conseille le viewer 6a de Adobe pour faire du SVG dynamique/SMIL
http://www.adobe.com/svg/viewer/install/beta.html (V. 6a difficile à trouver !)

Ne prenez pas la version "officielle" 3, car elle ne marche pas avec Mozilla !

Editeurs SVG statique et dynamique

Pas de logiciel gratuit, on conseille Webdraw ou son successeur (commercial)
http://tecfa.unige.ch/guides/svg/pointers.html

Editeurs SVG statique et exporteurs

Prenez Inkscape (gratuit) pour faire des dessins.
Note: OpenOffice "Draw", Illustrator etc. permettent de sauver du SVG

SVG avec un éditeur XML

La DTD est à la fin de la spécification officielle
http://tecfa.unige.ch/lib/xml/dtd/svg10.dtd (copie locale de SVG 1.0)
http://www.w3.org/TR/SVG/ (SVG 1.1 en oct 2007).
On conseille d’installer la DTD dans votre éditeur XML si c’est pas fait.

Installation d’une DTD dans Xemacs (pas nécessaire pour Exchanger lite !)

Il faut copier le fichier avec la DTD qq part sur votre système (de préférence au même endroit que le CATALOG.
Ensuite éditer le fichier ...XEmacs/xemacs-packages/etc/psgml-dts/CATALOG qui se trouve dans l’installation Xemacs.
Ajouter une ligne qui associe un identificateur public avec un fichier

Exemple Unix: PUBLIC "-//W3C//DTD SVG 1.0//EN" /web/lib/xml/dtd/svg10.dtd

Exemple Dos:  PUBLIC "-//W3C//DTD SVG 1.0//EN" svg10.dtd

N’oubliez pas de dire à Emacs que *.svg est associé à XML, éditez le fichier ~/.xemacs/init.el et ajoutez:

(setq auto-mode-alist

   (append ’(("\.svg"  . xml-mode)) auto-mode-alist))

Note: Votre home (~) sous windows est qq. part dans c:\Documents and Settings\xxxx\. Alternativement on peut aussi insérer cette instruction dans ...XEmacs\site-packages\lisp\site-start.el