Scalable Vector Graphics

04/11/2004

Scalable Vector Graphics (SVG) est un langage XML, né en 1998 peu après la recommandation XML 1.0. Il est issu d’un groupe de travail du W3C. Il permet de créer des graphiques vectoriels en deux dimensions dans un format texte portable. Il est composé de trois concepts : des formes vectorielles, des images et du texte. Tous ces objets graphiques peuvent être regroupés, mis en forme, transformés par des fonctions mathématiques (translation, multiplication de matrice, modification d’échelle,…). SVG fournit également tout un ensemble de possibilités pour créer des filtres élaborés, des dégradés de couleurs, ou autres effets d’éclairage. SVG supporte de nombreuses autres recommandations du W3C, en particulier Xlink, CSS, DOM, SMIL… Ainsi, SVG peut être utilisé pour créer des graphiques statiques, mais aussi dynamiques et interactifs. Les événements DOM remontent des informations sur la modification du document ou du contexte de la page Internet (clic de la souris par exemple) et le Javascript permet de réagir en conséquence. Les multiples possibilités du langage ont en fait un concurrent très sérieux à la technologie Flash (d’autant que le format est libre de droit, et engendre un coût de développement nul en termes d’infrastructure logicielle). Le format XML, rend ce format utilisable par toutes les librairies XML disponibles sur le marché et permet de créer un graphique avec un simple traitement de texte. SVG s’intègre très bien avec les pages XHTML et l’utilisation de XSL-FO permet également d’insérer des graphiques à l’intérieur des documents PDF. Pour visualiser des documents SVG, un logiciel est nécessaire. Il s’agit soit d’une application à part entière, comme tous les produits d’Adobe (GoLive, illustrator), la visionneuse SVG de Batik (framework d’Apache en Java), le logiciel Inkscape, le navigateur X-Smiles,…Il peut également se présenter sous la forme d’un plugin pour votre navigateur. Le plugin d’Adobe pour Internet Explorer ou celui de Corel, la version de Mozilla avec SVG intégrée, KSVG pour Konqueror…Voici un exemple de document SVG.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!-- un cercle rouge avec un contour bleu  -->
  <circle cx="600" cy="200" r="100"
        fill="red" stroke="blue" stroke-width="10"  />
</svg>

Un document SVG est identifié par une balise éponyme. Ici seul un cercle rempli en rouge avec un bord épais bleu est affiché.