Que peut-on faire avec SVG?
Les meilleures applications actuelles réalisées avec SVG vous ferons voir ce que l'on peut faire avec ce langage graphique standard.
SVG est un langage pour convertir les données en graphiques. Nous allons voir avec la liste d'applications qui suit que cela peut représenter en fait une variété très étendue d'utilisations.
Mais avant tout, il ne faut pas se leurrer, SVG ne convient pas à tous les cas de figure et souvent il vaudra mieux remplacer le code par une simple image, éventuellement avec une image map pour ajouter un peu d'interactivité...
- Parce que le code SVG est lourd, on peut souvent le remplacer par une image sans ralentir le chargement de la page. Il convient donc plutôt quand l'interactivité est essentielle.
- Il n'est pas toujours supporté parfaitement par les navigateurs, donc on doit cibler un public pouvant choisir un navigateur recommandé.
- Il est arrivé que la mise à jour d'un navigateur ait supprimé la compatibilitité avec certaines balises SVG. La précédente condition s'applique donc d'autant plus.
- Canvas convient mieux quand on n'a pas besoin d'accéder individuellement aux éléments de l'image. Voir le comparatif Canvas vs SVG.
Mais lorsque les conditions sont réunies, il est alors possible de fournir grâce à SVG des choses étonnantes...
SVG Web Demo
Ce site propose un outil qui convertit SVG en Flash afin de l'afficher sur tous les navigateurs. Ce peut être une solution pour les navigateurs anciens.
Tracer un chemin sur une carte
Grâce au framework Raphael qui sait tirer profit de SVG ainsi qu'une base de données cartographique on peut tracer la voie entre un point de départ et un point d'arrivée sur une carte. La démo utilise un copie d'écran d'OpenStreetMap et quelques lignes de JavaScript. Cette application convient bien pour indiquer aux visiteurs comment accéder à un lieu à partir de la gare, par exemple.
Jeu de plateau
Le lien est sur un fichier SVG. Il montre une machine de rube-goldberg en action, autrement dit un mécanisme pour enchaîner des actions jusqu'à un aboutissement final. On voit bien que ce système a toutes les possibilité d'un jeu de plateau du genre Mario ou Duke Nukem en version 2D.
Le jeu Invaders
Un autre fichier SVG montrant l'utilisation possible dans le domaine du jeu, avec ce classique des arcades. Il n'est pas optimisé et le jeu est plutôt lent, mais il est néanmoins complet!
Le jeu Tetris
Un autre classique dans un fichier SVG. La vitesse ici est moins cruciale, aussi la démonstration est plus convaincante. On voir en conclusion que SVG convient pour les jeux pourvu que ce ne soit pas des jeux d'actions. Canvas est alors plus approprié mais non optimal non plus. Il faut passer à WebGL pour ce domaine d'utilisation.
Musique visuelle
Le programme permet de choisir un morceau musical puis affiche des textes pour l'accompagner.
Il se bloque au chargement audio sur certains navigateurs mais on peut continuer en cliquant sur l'image.
Anatomie: la bouche animée
Cette démonstration fournie par le site svg-whiz.com montre les composants anatomiques de la bouche.
La maison de Trajan désassemblée
Cette animation fournie par Wikimedia montre l'intérieur de la maison de l'empereur romain Trajan qui se désassemble comme un puzzle quand on clique sur l'image...
Cartes à jouer
Ce jeu de 52 cartes étant vectoriel, elles peuvent être agrandies sans perte de qualité et tous les jeux peuvent donc être convertis en JavaScript pour tourner sur un navigateur. Elles sont aussi disponibles au format EPS. Il existe aussi une version CSS!
En conclusion, lorsque SVG est dans son domaine d'application priviliégié, où la vitesse n'est pas cruciale mais ou l'interaction avec les parties de l'image est nécessaire, et le public n'est pas restreint à des anciennes versions de navigateurs, ce format permet de réaliser de très belles choses et rendre l'expérience de l'utilisateur très agréable.