Le format SVG : introduction

Le format SVG (Scalable Vector Graphics) est un format d’image vectorielle pour le web. Il date de 2001 pour sa version 1.0. Il a cependant mis du temps à faire sa place dans les navigateurs, auquel il était pourtant destiné. Il a d’abord été possible de l’importer via le tag img, puis html 5 lui a enfin fait une place dans ses pages. On peut aujourd’hui écrire un tag svg directement dans du code html.

Il faut rappeler qu’un format vectoriel a l’avantage de permettre de créer des éléments graphiques très léger, car définis par des coordonnées plutôt que par des millions de pixels, et permettent aussi un changement de taille sans changement de poids. C’est cet avantage qui permis aux animations Flash de s’imposer dans le début des années 2000. SVG a d’ailleurs été pensé pour être une alternative open source à Flash, puisqu’il est possible de faire des animations dans un fichier svg.

En effet, le SVG est accessible par le navigateur, ce qui est une grosse différence avec tous les autres éléments "riches" comme Flash. A partir du moment où le navigateur peut voir les différents éléments individuels et en groupe qui constituent une image svg, il est possible de les modifier avec le langage CSS, ce qui permet des comportements en survol, et des animations simples grâce aux animations CSS3, mais on peut aussi atteindre les éléments avec javascript, ce qui étend considérablement le champ et en fait un réel outil de développement, à côté de la balise canvas.

SVG est du XML

Un des avantages des fichiers SVG est qu’ils sont codés en XML, un code simple et lisible aussi bien par les humains que les machines. C’est aussi une norme ouverte, ce qui signifie qu’il n’y a pas de licence à payer pour utiliser ce format. Enfin, ça signifie qu’un simple éditeur de texte permet de regarder et de modifier le contenu d’un format SVG.

Écrire dans du html

Commençons par faire un essai dans un fichier html :

<!DOCTYPE html>
<html>
   <head>
       <title>Un svg</title>
   </head>
   <body>
       <svg width="500" height="300">
           <rect x="0" y="0" width="50%" height="100%" fill="red" />
           <rect x="50%" y="0" width="50%" height="100%" fill="yellow" />
           <circle cx="50%" cy="50%" r="100px" fill="white" />
           <text x="50%" y="250" font-size="40" text-anchor="middle" fill="#000000">Un svg</text>
       </svg>
   </body>
</html>

ça donne ça :

Un svg

Le SVG est simplement écrit dans une balise à son nom. On doit lui donner comme attribut une largeur et une hauteur, ici le chiffre sans unité de mesure est considéré comme un chiffre en pixels.
A l’intérieur de la balise on va écrire tous les éléments nécessaire, par défaut dans l’ordre où il doivent apparaitre. Le premier élément sera virtuellement à l’arrière, le dernier sera virtuellement à l’avant.
Dans le svg ci dessus, il y a deux rectangles, un cercle et un texte.