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

Mais lorsque les conditions sont réunies, il est alors possible de fournir grâce à SVG des choses étonnantes...

Tigre en SVG

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.

Plan en SVG

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 SVG

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.

Invaders en SVG

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!

Tetris en SVG

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.

Images accompagnant la musique en SVG

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.

Bouche animée en SVG

Anatomie: la bouche animée

Cette démonstration fournie par le site svg-whiz.com montre les composants anatomiques de la bouche.

Palais de Trajan

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 SVG

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 si on peut cibler un public avec un navigateur donné, ce format permet de réaliser de très belles choses et rendre l'expérience de l'utilisateur le plus agréable possible.