SVGround : tout sur SVG

Introduction

Logiciels requis
Qu’est ce que SVG ?
Le cas Flash

Logiciels requis

Ce site est codé en XHTML et envoyé en tant que tel ce qui signifie que seuls les navigateurs récents peuvent l’afficher. À vrai dire, tous sauf IE .
La situation du spport de SVG dans les navigateurs (fin 2008) s’améliore enfin. Firefox 3 gère presque tout (sauf les animations), les navigateurs basés sur WebKit (Konqueror, Chrome, Safari) ne s’en sortent pas trop mal et Opera a enfin un très bon support (à partir de la version 9.5). Seule ombre au tableau, et elle est de taille : Internet Explorer ne supporte pas du tout SVG (car cela rentre en concurrence avec Silverlight). De plus, il existait un plugin d’Adobe pour Internet Explorer mais celui-ci n’est plus maintenu. Il existe un autre plugin, Renesis, mais de toute façon l’avenir est le support du SVG dans le navigateur, comme vous le comprendrez dans le chapitre sur l’extensibilité.

En résumé, je vous conseille viement d’utiliser Opera 9.5 (disponible sur toutes les plateformes) pour suivre ce cours. Avec les autres navigateurs, certains exemples ne fonctionneront tout simplement pas. Par exemple, Firefox ne gère pas, pour l’instant, l’animation déclarative. Si tous se passe bien, vous devriez voir ci-dessous les mots « Hello world » changeant en permanence de couleur.

Si vous voyez bien le texte changeant de couleur, vous êtes prêts à commencer. Sinon, le forum est là pour ça !

Scalable Vector Graphics

Mais au fait, ça veut dire quoi SVG ?

Scalable

« Scalable » signifie « adaptable ». Pour SVG, il a deux sens.

Le premier, c’est qu’un document SVG peut être agrandi ou réduit uniformément sans perte de qualité. Pour comprendre en quoi c’est un avantage, penchons nous sur le cas des graphiques bitmap (formats : bitmap, tiff, jpeg, gif, png, etc.). Un graphique bitmap est un graphique ou la couleur de chaque pixel est connue et stockée. Diverses méthodes de compressions existent mais elles sont souvent synonymes de perte de qualité (jpeg) ou de limitations au niveau des couleurs (gif). Regardez ce qui se passe lorsqu’on essaye d’agrandir une image de type bitmap :

Image d’origine :

Image grossie 4 fois :

Le programme de grossissement ne pouvant pas deviner quels seraient les pixels manquant, il duplique le pixel de départ 4 fois pour un grossissement de 2, 9 fois pour un grossissement de 3, 64 fois pour un grossissement de 8, etc. Et même s’il existe des technologies pour atténuer ses effets (anti-aliasing, etc.), la perte de qualité est inévitable.
Avec les graphiques vectoriels, tel que SVG, ce problème ne se pose pas. Ce qui est décrit n’est pas des points mais des formes. Ainsi, on peut facilement agrandir ou reduire un graphique : c’est l’ordinateur qui va se charger de recalculer tous les points. Ce format est particulièrement intéressant lorsqu’on désire imprimer des affiches de très grand format (des affiches publicitaires par exemple).

Le second sens, c’est que SVG est adaptable sur le Web. En fait, il a été pensé pour pouvoir s’intégrer dans une multitude de langages et affichable dans une multitude de média. Ainsi, il peut être adapté pour permettre un meilleur accès à des personnes handicapés, à des téléphones mobiles, à des sorties imprimante haute résolution. Il peut très facilement être réutilisé, que ce soit un graphique tout entier ou seulement une partie. Grâce à sa syntaxe XML, il peut aisément être traité grâce à XSLT ou d’autres langages de programmation via DOM ou SAX et inclu dans d’autres document XML, XHTML ou XUL. SVG peut lui même inclure en son sein différents langages XML.

Vector

« Vector » signifie bien sur « vectoriel ». SVG, plutôt que de prendre tous les points d’une image comme le ferait une image bitmap utilisent les différents éléments géométriques, tels que les lignes, les cercles, les rectangles, les polygones, etc. En clair, il enregistre un cercle en tant que tel et non pas comme un ensemble de points. Heureusement pour nous, SVG connait autre chose qui nous sera bien utile : les transformations. On peut aussi appliquer des filtres comme on le fait dans Photoshop ou The Gimp. Bref, tout un tas d’opérations est réalisable sur un objet SVG.

Graphics

On est là pour faire du dessin, non ?

Le cas Flash

Apprendre un nouveau langage est un investissement qui demande du temps, et même si SVG est plutôt facile, une question se pose : pourquoi utiliser un standard peu supporté alors que Flash peut faire tout ce que SVG peut faire et qu’il est déployé chez 99% des internautes ?

Pour faire taire une bonne fois pour toute ceux qui, au troisième millénaire, pensent encore ça, je vous propose deux réponses : une courte et une longue.

La réponse courte

Regardons ce qui a fait le succès d’Internet. Deux protocoles sont à la base du Web : HTTP et HTML. Ils sont tous les deux ouverts, textes et simples. L’ouverture implique la liberté d’utilisation et la gratuité. Le fait que ces protocoles soient textes (en opposition aux formats binaires) les rendent faciles à débugger, à analyser et à étudier. Enfin, leur simplicité donne l’opportunité à un large public de les utiliser.

SVG est de la même trempe. Il est promu par le W3C et le créateur du HTML, Tim Berners-Lee, en est le promotteur. SVG est un format pensé dans la continuité de ce qui a fait le succès du Web.

Regardons maintenant ce qui a conduit à l’échec du Minitel : ce système était fermé, coûteux et complexe. En effet, entrer en tant qu’opérateur dans le réseau Minitel n’était pas à la porté de chacun. C’était un espace réservé à ceux qui pouvaient payer et un opérateur unique avait le monopole.

Je sens que vous devinez le fil de ma pensée : oui, Flash c’est exactement comme le minitel ! C’est fermé : Adobe a tous les droits et dirige les développements de Flash comme il le souhaite. Adobe décide qui peut utiliser Flash et qui n’y a pas le droit. C’est coûteux : la suite Adobe Flash CS4 est coûteuse et certainement pas à la portée de tout le monde. Enfin, Flash est binaire et une animation Flash est donc un exécutable binaire envoyé sur HTTP.

Flash est donc à l’opposé de ce qui a fait le succès du Web. C’est une technologie qui ne devrait même pas exister.

La réponse longue

Si l’explication précédente ne vous a pas convaincu, sachez qu’il y a des tonnes de raisons de ne pas utiliser Flash. En voici une liste en vrac et non exhaustive.

Flash est binaire, et va donc dans le sens opposé du Web qui est entièrement texte ;
Flash est lent et les terminaux se font de plus en plus multiples (téléphones, Netbooks, etc) : on ne peut donc pas miser sur le dernier processeur surpuissant chez Monsieur-tout-le-monde ;
la lecture de vidéo en Flash demande énormément de puissance processeur, surtout si ces vidéos sont protégés (ce qui ne signifie rien puisque toute protection finit par être cassée) ;
Flash est propriétaire : Adobe décide seul de l’orientation de Flash ;
Le seul plugin fonctionnant bien est fait par Adobe, qui décide donc qui peut utiliser Flash. Les Linuxiens de la première heure ont tous une rancœur contre Flash. Flash fonctionne mal ou pas du tout sur certains systèmes fonctionnant sur des processeurs 64 bits. De même, les futurs possesseurs de netbooks basés sur des processeurs ARM feront la même expérience. L’iPhone ne supporte pas Flash, etc., etc. ;
développer en Flash est coûteux. Et à ceux qui disent qu’on peut toujours avoir Flash gratuitement par des moyens illégaux, je réponds qu’il est impensable qu’on doive pirater un logiciel pour pouvoir éditer du contenu sur le Web. Encore heureux ! ;
Flash pose des problèmes de sécurité : seul Adobe est en mesure de décider de corriger ou non une faille de son plugin. C’est de plus incompatible avec les politiques de sécurité du logiciel libre ;
Flash est obscur aux outils de recherche. Le référencement n’est plus automatique et devient difficile ;
on ne peut pas utiliser les boutons de contrôle du navigateur (Précédent, Suivant, etc.) ;
l’url désigne l’animation Flash toute entière, on ne peut pas pointer sur un élément particulier ou une page particulière d’un site Flash. Il devient donc impossible de mettre en favoris une partie précise d’un site Flash ;
pas de copier/coller ;
impossible d’enregistrer une image (ce qui ne sert en rien pour protéger l’image puisqu’il suffit de faire une vulgaire capture d’écran) ;
pas de recherche de texte possible grâce à la recherche du navigateur ;
pas de traduction en ligne possible ;
le menu du clic droit est différent ou inopérant ;
l’impression est catastrophique ;
Flash est incompatible avec les feuilles de style CSS ;
Flash n’utilise pas le cache, l’animation est rechargée à chaque fois dans son intégralité. C’est donc plus lent et plus coûteux en bande passante ;
les liens ne suivent pas les conventions de couleur pour les sites visités ;
les barres de navigation (scroll) ne sont pas celles du navigateur et déstabilisent le visiteur ;
il est impossible de redimensionner le texte via les mécanismes habituels du navigateurs ;
les outils d’accessibilité sont inopérants (contraste, taille du texte, lecture du texte, zoom) ;
il n’y a pas de présentation progressive pendant le chargement comme avec XHTML/CSS ;
pas de statistiques fiables puisque l’animation Flash est vue comme un seul objet et non comme un ensemble de pages.

En résumé, Flash casse complètement l’interface utilisateur par défaut du système d’exploitation et du navigateur. Du coup, il faut s’adapter à chaque site Flash et c’est frustrant. Je suis sûr que vous avez déjà pesté contre un site Flash mal conçu. En réalité, faire un site bien conçu avec Flash est un exploit. D’ailleurs, je n’ai rien vu de tel.

Le dernier problème est toute cette génération de graphistes auto-proclamés qui n’ont pas compris qu’on ne peut pas faire du Web au pixel près et qui aiment à exposer leurs talents artistiques au mmmmooooooonnnnndddddddeeeeeee entier . Sans se rendre compte, qu’en fait, ils nous ennuient puisque c’est le contenu d’un site et non sa forme qui fait sa richesse.

Accueil

Un premier document SVG

SVGround : cours SVG