Infographie

Images SVG

Graphique vectoriel adaptable (SVG)

À la différence des images « Bitmap » ou images matricielles constituées de pixels, le format « Scalable Vector Graphics » ou Graphique vectoriel adaptable, c’est-à-dire l’image vectorielle, Wikipédia parle d’image en mode trait, est composée d’objets géométriques. Des cercles et des rectangles, des segments de droite, polygones, arcs de cercle, des tracés etc. Le tout combinable à souhait, avec moult effets, méthodes et technique d’animation avec le langage SMIL. Sans parler de son imbrication totale au DOM et donc avec un support Javascript et CSS3 complet!

L’image vectorielle est stockée sous forme de coordonnées, en texte clair, dans un fichier XML. Pour ma part il y a plus précisément trois caractéristiques principales :

1. La première était que l’image est redessinée à chaque affichage. On n’emmagasine pas les images mais les instructions pour les dessiner. Si certaine image, comme mon exemple plus bas, deviennent vite plus lourds qu’un « bitmap » équivalent, l’art de la vectorielle permet de faire des miracles au niveau du poids, particulièrement en animation.
2. Stocké des objets individuels, en texte clair, dans un simple fichier XML, permet beaucoup de flexibilité et de portabilité! On parle ici de texte, de simple texte! On verra d’ailleurs de plus en plus de CMS gérer les images SVG. Pourquoi pas des librairies d’objets, combinable dans un éditeurs? Par exemple plus besoin de téléverser une image, un simple copier coller suffit! C’est d’ailleurs le rôle de ce tutoriel, expliquer une méthode pour coller le SVG dans une page Web, d’ici à ce que les CMS le permettent un jour.
3. Dessiner des formes à l’aide de coordonnées permet de redimensionner celle-ci sans altérer la qualité. Comme on peut voir dans l’exemple ci-contre, plus on redimensionne un « bitmap » et plus l’image se pixellisera. Ce qui n’est pas le cas d’une image vectorielle! On ne peut évidemment pas aller en deçà d’un seuil minimum sans provoquer un entassement et une perte d’information, mais on peut agrandir à l’infinie l’image. Un argument de poids ou de taille, pour faire dans le jeu de mot, quand on pense aux écrans Retina, 2 à 4 fois plus dense!

XML et Graphique vectoriel adaptable (SVG)

Marginal, l’images vectorielles est la solution à tous les problèmes. Le SVG, est un format de données conçu pour décrire des ensembles de graphiques vectoriels basé sur le XML. Ce format inspiré directement du VML / PGML du consortium de la W3C permet de manipuler et dynamiser des images beaucoup plus légertes. Ajouter du contenu textuel directement dans l’images et animé par le SMIL.

Avantages

• C’est possible de créer et éditer une image avec un simple éditeur de texte;
• C’est possible de rechercher, indexer, crypter et compresser une image;
• C’est possible de redimensionner une image;
• C’est possible d’imprimer en haute résolution;
• C’est possible de zoomer une image (sans dégradation);
• SVG est un standard « ouvert »;
• Un fichier SVG est en pure XML.

Il suffit de créer une image vectoriels SVG directement en XML ou à l’aide d’un logiciel comme « OpenOffice » sauvegarder en format SVG. Ou encore de les convertir avec un service comme Online Convert mais attention, la conversion d’image peu drastiquement détériorer une images comme en fait foi le logo :

Exemple de fichier XML format SVG :

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200">
  <title>Exemple simple de figure SVG</title>
  <desc>
    Cette figure est constituée d’un rectangle,
    d’un segment de droite et d’un cercle.
  </desc>

  <rect width="100" height="80" x="0" y="70" fill="green" />
  <line x1="5" y1="5" x2="250" y2="95" stroke="red" />
  <circle cx="90" cy="80" r="50" fill="blue" />
  <text x="180" y="60">Un texte</text>
</svg>

Le plus facile est d’intégrer l’image dans une balise « img » (comme l’exemple de la carte plus haut) :

<img src="http://upload.wikimedia.org/wikipedia/commons/8/8b/Plates_tect2_fr.svg" width="100%" />

Logiciels

• Adobe Illustrator
• Apache OpenOffice
• Inkscape (libre et gratuit)
• LibreOffice Draw (libre et gratuit)
• WebGL

Ressources

• Wikipédia : Graphique vectoriel adaptable
• Recommandation SVG1 du W3C en version française
• W3C : Mobile SVG Profiles: SVG Tiny and SVG Basic
• SVG, le dessin vectoriel pour le web par Nicolas Gili