le Format SVG

logo inkscape Inkscape Editeur de graphisme vectoriel Open Source


logo_fcm FullCircle Magazine n° 60 d'avril 2012 Introduction

Icône de l'outil pédagogique Le Format SVG

Imaginez-vous donnant des instructions à quelqu'un afin qu'il dessine une maison. Il y a des chances pour que vous décriviez des formes géométriques et leurs positions relatives.

« Dessine un gros rectangle rouge de la moitié de la largeur de la page, à peu près au milieu et un peu plus large qu'il n'est haut. Maintenant, mets un triangle gris sur le dessus, un peu plus large afin qu'il dépasse sur les bords... »

Ces mêmes instructions devraient fonctionner pour n'importe quelle taille de canevas, du timbre jusqu'au panneau d'affichage.

Vous venez d'imaginer le monde du dessin vectoriel.


Lorsque vous prenez une photo ou que vous créez une image dans GIMP, vous travaillez avec des images raster – parfois appelées bitmaps (attention, ce n'est pas la même chose que le format de fichier .bmp – même s'il s'agit d'un exemple d'image bitmap).
Une image raster (ou bitmap) est composée essentiellement d'une liste de pixels de couleur, qui dit à l'ordinateur de colorer un pixel en rouge, puis un en bleu, un autre en vert ... et ainsi de suite, pixel par pixel, ligne par ligne, jusqu'à ce que le dernier pixel soit atteint.

En revanche, le dessin vectoriel consiste en une série d'instructions.

« Dessinez un cercle rouge de 10 unités de rayon, centré sur les coordonnées X,Y. Maintenant, dessinez une ligne bleue depuis le coin supérieur gauche de la page vers le coin inférieur droit. »


Ce cercle rouge pourrait avoir un rayon de 10 pouces ou 10 miles, autrement dit, contrairement aux images raster, les images vectorielles peuvent être mises à n'importe quelle échelle sans perte de qualité.

cercles bitmap et SVG     
Un petit cercle mis à l'échelle comme image bitmap (ci-dessus à gauche) et comme image vectorielle (ci-dessus à droite).

Il y a beaucoup de formats raster :

  • JPEG,
  • GIF,
  • PNG,
  • BMP
pour en nommer quelques-uns ;

de la même façon, il y a beaucoup de formats vectoriels. La plupart d'entre eux nous sont venus d'applications propriétaires, tels que :

  • le DWG d'AutoCAD
  • ou le AI d'Adobe Illustrator,
mais il y en a notamment un dont le format est Ouvert, défini par le W3C (ou World Wide Web Consortium) – le même organisme de normalisation qui a créé le format HTML, le moteur même du Web.

Les graphiques vectoriels sont, de par leur nature, adaptables, mais, comme les membres de l'organisme voulaient que vous sachiez sans aucun doute ce que vous obtenez avec leur format, ils l'ont appelé « Scalable Vector Graphics » («graphique vectoriel adaptable») ou SVG.

Les fichiers SVG sont des fichiers texte contenant des collections imbriquées de « tags », similaires aux fichiers HTML.

Il existe :

  • un tag <circle> (pour le cercle),
  • un tag <line> (pour la ligne)
  • et ainsi de suite.

Ils peuvent être modifiés en utilisant un éditeur de texte.


Toutefois, lorsqu'une image devient de plus en plus complexe, il peut s'avérer bien plus facile d'avoir recours à un programme de dessin. Probablement le plus connu des programmes pour cela est Inkscape (www.inkscape.org), que vous pouvez trouver dans les dépôts de la plupart des distributions Linux, y compris Ubuntu et qui est également disponible pour Windows et MacOS.
Inkscape utilise le format SVG par défaut, ce qui en fait un formidable outil pour créer ou modifier des fichiers SVG, mais, par la même occasion, limite les possibilités du programme.


Un travail sérieux étant actuellement en cours sur la définition du format SVG version 2.0, Inkscape devrait, espérons-le, être en mesure de prendre de l'avance sur ses concurrents propriétaires dans les années à venir.

La structure à la sauce HTML des fichiers SVG et leur origine dans le W3C ont fait d'eux le standard officiel pour les images vectorielles dans le monde du web. Cela a pris beaucoup de temps, mais la plupart des navigateurs supportent les fichiers SVG nativement et il est possible de les insérer dans des fichiers HTML, ce qui est idéal pour des graphiques ou des cartes en ligne.
Il est possible de modifier la structure hiérarchisée des tags avec Javascript de la même manière que du contenu HTML, permettant à quiconque ayant quelques compétences en développement web de créer des graphiques interactifs. Comme c'est souvent le cas, malheureusement, le support spécifique varie d'un navigateur à l'autre et certaines des fonctionnalités avancées du format SVG pourront ne pas s'afficher de la même manière dans tous.
Ainsi, le SVG est super pour les diagrammes, les graphiques interactifs et même pour les oeuvres artistiques, mais il a un autre atout dans son sac qui l'élève au-delà de la douceur et de la simplicité inhérentes aux pures images vectorielles : il supporte les images raster.
Au plus simple niveau, il est possible d'inclure une image raster dans un fichier SVG, puis de dessiner des lignes et des cercles sur cette image ou de la rogner dans une forme bizarre utilisant un chemin SVG.
Mais les images raster peuvent également être utilisées comme motifs de remplissage dans les fichiers SVG :
Inkscape embarque par défaut quelques motifs, et j'ai personnellement utilisé la texture « sable » (qui ressemble au bruit ou à la neige sur une télévision non réglée) pour la simulation d'une pierre, de la cendre, des briques et même d'un champ de blé !

En allant encore plus loin, le SVG a un concept de filtres, des opérations mathématiques qui peuvent être combinées et appliquées aux pixels rasterisés dans votre image finale.
L'image est toujours composée de vecteurs, mais une fois ces vecteurs dessinés, les filtres créent toutes sortes d'effets grunges, qui requièrent normalement des programmes tels que GIMP ou Photoshop.
Regardez simplement comment un petit filtrage peut transformer des tâches vectorisées semi-aléatoires en boules de feu explosives :

 

tâches vectorisées

de simples tâches vectorisées...

...prennent vie avec des filtres SVG 

avec filtres SVG

Si vous souhaitez dessiner des icônes pour une application en utilisant Inkscape, des graphiques pour un site web en utilisant du Javascript ou bien faire de l'art abstrait en utilisant un éditeur de texte, le SVG est un format puissant et flexible qui promet encore davantage pour les années à venir.
Récupérez donc Inkscape avec votre gestionnaire de paquets et dessinez !
Icône de l'outil pédagogique Liens utiles

Inkscape : http://www.inkscape.org
Forum des utilisateurs d'Inkscape : http://www.inkscapeforum.com
Icônes SVG de la collection Tango : http://tango.freedesktop.org/
Le groupe de travail SVG duW3C : http://www.w3.org/Graphics/SVG/