SVG pour Scalable Vector Graphics est un format d’images vectorielles générées via le langage XML. Son utilisation se limite la plupart du temps à des formes vectorielles simples. Néanmoins, on voit éclore quelques expérimentations complexes de dessins vectoriels accompagnés d’animations dans des jeux ou des présentations de données dynamiques.

Durant de longues années, le SVG fut boudé par les navigateurs Web. Peu d’entre eux étaient compatibles. Il est aujourd’hui reconnu et interprété par la plupart, notamment par Internet Explorer en version 9.  Un petit groupe de passionnés tentent de populariser ce format vectoriel en proposant des démos intéressantes mais encore trop peu connues.

Le SVG ne manque pourtant pas de qualités pour satisfaire les webdesigners. Il garantit un rendu graphique sans perte de qualité grâce à son format d’image léger et son élasticité. Les caractéristiques des objets vectoriels sont stockés directement dans le document XML autorisant ainsi une manipulation aisée du DOM via l’emploi de scripts. L’application de styles graphiques peut être réalisée via CSS.

Des formes complexes peuvent être également gérées via l’emploi des chemins (paths) basés sur les courbes de Bézier. La transparence, les motifs, les dégradés sont également pris en compte. Vous l’aurez compris, le SVG offre une multitude de possibilités encore sous-exploitées.

Les outils sont aussi au rendez-vous afin d’obtenir rapidement des objets vectoriels au format SVG. Pour n’en citer que quelques uns :

• Karbon,
• Inskape,
• Illustrator,
• Open office (uniquement en export),

La liste complète est disponible sur Wikipédia.

Exemples d’utilisation du format SVG sur le Web

Afin de prendre conscience du potentiel des images vectorielles, je vous invite à découvrir cette sélection d’expériences mêlant SVG, JS et CSS.

1. Utilisation des navigateurs Web

2. Jeu SVG : Biplan

3. Jeu SVG : Ballons dans la forêt

4. Le planetarium

5. Leica en SVG

6. Animation SVG + RaphaelJS

7. Poissons d’outre-Web (Firefox)

8. Cartographie interactive de la population aux Etats-Unis

9. Cartographie et graphes US en SVG

10. Carte avec histogrammes 3D

11. Carte de la France en SVG

12. Carte de l’Espagne en SVG avec graphes interactifs

13. Cartographie des visiteurs allemands de kartograph.org

14. Nombre d’habitants / km2 en France métropolitaine

15. Vue artistique de la géographie italienne

16. Voyage autour du monde avec Nyan Cat

Pour les plus courageux, Alsacréations a compilé de nombreuses informations sur le SVG, le dessin vectoriel pour le Web.

Si vous avez connaissance d’autres démos ou fichiers SVG, n’hésitez pas à les partager dans la zone de commentaire de l’article ou directement sur le mur Twitter et Facebook du Magazine du Webdesign.

ITEMS RELATIFS : INSPIRATION, SVG