Images et graphiques pour le web: Le format SVG
Un peu d'histoire
Comme nous l'avons déjà signalé au chapitre 2, l'absence
d'un format vectoriel pour le web a longtemps constitué une anomalie,
laquelle finit par émouvoir le W3C. Au début de 1998, cet organisme
invite les entreprises à lui faire des propositions. Il reçoit
quatre projets, dont deux (l'un d'Adobe, IBM, Netscape et Sun -- l'autre de
HP, Macromedia, Microsoft et Visio ) sont retenus et fusionnés pour
servir, à l'automne 1998, de point de départ aux travaux d'une
commission rassemblant les principaux éditeurs de logiciels graphiques
(Adobe, HP, IBM, Macromedia, Microsoft, Netscape, Quark, Sun, Visio, etc.).
Un premier "draft" est publié le 11 février 1999. Ainsi,
le format SVG part bien tard à la conquête du web.
Curieusement, c'est la société IBM qui manifeste la première
un intérêt pour le nouveau format. En juillet 1999, elle met en
ligne un lecteur gratuit de fichiers au format SVG, écrit en Java. La
quatrième version de ce lecteur est publiée en avril 2000, puis
Big Blue se desintéresse du format.
L'éditeur Corel est un fidèle supporter du format SVG. En août
1999, il crée le premier filtre permettant d'enregister les images de
son logiciel Corel Draw (la version 11 est publiée en juin 2002) au
format SVG. Sur le site de sa suite SmartGraphics, on peut télécharger
un plug-in permettant aux images SVG d'être vues dans un navigateur (inscription
préalable nécessaire). En liaison avec Oracle, Corel introduit
en 2003 le format SVG dans la version 10g du célèbe SGBD.
L'éditeur Adobe est également un chaud supporter du format SVG.
En février 2000, il rajoute ce format à la fonction d'exportation
de la version 8.01 d'Illustrator (en mai 2000 pour la version 9, et en 2003
pour la version 10), et publie un plug-in pour les versions 4 du navigateur
de Netscape et les versions 5 d'Internet Explorer (pas de formulaire à remplir).
Avec SVG, Adobe tente de concurrencer Flash, ce qui n'apparaît pas facile !
En juillet 2002 a lieu à Zürich la première conférence
dédiée au format SVG, intitulée "SVG Open".
Elle est reconduite désormais chaque année. Quelques livres (trois à notre connaissance, tous en anglais) ont été consacrés au format
SVG.
Au W3C, les travaux relatifs au format SVG suivent leur cours. La première
version de la "recommandation" (version 1.0) est publiée en
septembre 2001, la seconde (version 1.1) en janvier 2003, la troisième
est en chantier. On corrige et on complète.
Le format SVG suscite beaucoup d'activité, mais... on ne le rencontre
pratiquement pas sur la toile, et nous tenterons plus loin d'expliquer pourquoi.
A titre d'exemple, on peut visiter le site que la Bibliothèque Nationale
de France a consacré à la bande dessinée. Ce site est
réputé être une belle réalisation technique, mais
l'internaute n'en a cure. Il se crève les yeux à cause d'un affichage
trop petit, et il enrage à cause d'une mauvaise navigation (si vous
cliquez sur une image pour l'agrandir, vous ne pouvez pas revenir en arrière
sans quitter le site -- génial, non ?). Un format plus classique et
une meilleure réalisation pratique eussent été bien préférables ; la technique doit se faire oublier. Quelques sites affirment que le format SVG est particulièrement bien adapté à la reproduction
de cartes géographiques interactives, et il existe un exemple en français
(l'interpréteur Javascript du navigateur doit être activé).
Notons pour terminer qu'une version allégée (SVG Tiny ou SVG
Mobile) du format SVG est en développement depuis octobre 2001 pour
les dispositifs mobiles. Nokia a annoncé son intention d'utiliser ce
format pour les téléphones de troisième génération.
Le fonctionnement du format SVG
A titre d'exemple, nous avons fait figurer ci-dessous une image simple (un
rectangle rouge bordé de noir) enregistrée successivement au
format GIF, au format SVG, et au format SVG compressé (SVGZ). Ce dernier
a été introduit par l'éditeur Adobe pour réduire
le poids des images SVG standard. Bien entendu, les images SVG ne sont visibles
que si vous avez déchargé le plug-in d'Adobe. Ce dernier est
réputé compatible avec le navigateur de Netscape (sur la plate-forme
Windows), mais ce n'est pas ce que j'ai constaté (avec la version
7). Pas de problème, par contre, avec IE6 (le plug-in est un ActiveX).
Comme on peut le constater dans l'exemple ci-dessus, les images SVG pèsent
beaucoup plus lourd que l'image GIF, et nous avons vérifié que
cette conclusion restait valable pour des images plus chargées en information.
La transmission des polices de caractères, en particulier, prend beaucoup
de place, mais on peut spécifier que l'on utilise les polices standard
de la plate-forme.
A titre d'information, nous avons fait figurer ci-dessous le code de l'image
SVG non compressée. Il faut une certaine habitude pour reconnaître
un rectangle rouge bordé de noir dans cette description.
<?xml version="1.0" encoding="iso-8859-1"?>
<
!-- Generator: Adobe Illustrator 9.0, SVG Export Plug-In -->
<
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd" [
<
!ENTITY st0 "fill:#FF0000;stroke-width:2;">
<
!ENTITY st1 "fill-rule:nonzero;clip-rule:nonzero;stroke:#000000;stroke-miterlimit:4;">
]>
<
svg width="102pt" height="32pt" viewBox="0 0 102 32" xml:space="preserve">
<
g id="Calque_x0020_1" style="&st1;">
<
path style="&st0;" d="M101,31H1V1h100v30z"/>
<
/g>
<
/svg>
On notera que le format SVG, comme le format JPEG2000, requiert l'usage de
la balise <embed> au lieu de la balise <img> traditionnelle (le
type MIME correspondant est : image/svg+xml).
L'avenir du format SVG sur le web
Quoiqu'en disent les plus chauds partisans du format SVG, nous avons constaté dans
de nombreux cas que ce format conduit généralement à des
fichiers plus lourds que ceux obtenus avec les formats matriciels. Bien sûr,
on peut toujours construire un exemple ad hoc dans lequel le format SVG fait
bonne figure, mais un exemple isolé ne démontre rien.
Nous ne pensons pas que cette lourdeur provienne d'une mauvaise implémentation
du format dans Illustrator. Nous pensons plutôt qu'il s'agit d'un défaut
intrinsèque de ce format. Les créateurs du SVG ont voulu que
la description de l'image suive les règles du méta-langage XML,
et que le code soit explicite. Tout cela consomme beaucoup d'octets !
D'abord, écrire "width", "path", "viewbox",
etc. en toutes lettres (voir le texte décrivant l'image dans le paragraphe
précédent) consomme plus d'espace que coder ces mots sur un ou
deux octets. Un tel codage rendrait le texte illisible, mais il réduirait
la taille du fichier d'un facteur deux ou trois.
Ensuite, la description de l'image fait appel à un nombre restreint
de signes : lettres majuscules et minuscules (la casse ne semble pas compter),
chiffres, et quelques signes de ponctuation. Rappelons qu'avec un octet, on
peut représenter 256 signes disctincts. Ici, on en utilise 3 fois moins.
De nouveau, en renonçant à la lisibilité, on pourrait
gagner encore un facteur 3.
En rajoutant une petite compression LZW, on pourrait finalement créer
un fichier final dix fois moins lourd... et retrouver les performances de Flash.
A quoi bon, évidemment !
Conclusion
Nous sommes extrêmement pessimistes quant à l'avenir du format
SVG sur le web. D'abord, l'initiative du W3C est arrivée trop tard :
la place était déjà prise (Flash). Ensuite, les options
retenues pour décrire l'image conduisent à un code bavard, et
donc à un poids de fichier excessif. Enfin, pour afficher une image
SVG, il faut télécharger un plug-in -- ce n'est pas un drame,
mais cela allonge encore la liste des inconvénients.
En conclusion, il n'est pas étonnant qu'on ne rencontre pas d'images
au format SVG en surfant sur le web -- sauf sur quelques très rares
sites créés par des spécialistes qui veulent montrer leur
savoir-faire.
| 
— Le format SVG