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).

image GIF (159 octets)		image SVG (575 octets)		image SVGZ (413 octets)

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.