Imagine giving instructions to someone in order for them to draw a picture of a house. The chances are that you would describe geometric shapes and their relative positions. “Draw a big red rectangle about half the width of the page, roughly in the middle and a little wider than it is tall. Now put a grey triangle on top of it that’s a little wider so it overhangs at the edges…” The same instructions would work for any size of canvas from a postage stamp to a billboard. You’ve just imagined the world of vector graphics. When you take a photo or create an image in GIMP, you’re working with raster graphics – sometimes called bitmaps (not the same as the .bmp file format – although that is an example of a bitmap graphic). A raster graphic (or bitmap) is essentially a list of pixel colors, which tells the computer to draw a red pixel, then a blue one, then a green one… and so on, pixel-by-pixel, line-by-line, until the last pixel is reached.
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 dise à 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.
Vector graphics, on the other hand, consist of a series of instructions. “Draw a red circle with a radius of 10 units, centered at coordinates X,Y. Now draw a blue line from the top left corner of the page to the bottom right.” That red circle could have a radius of 10 inches, or it could be 10 miles, meaning that, unlike raster images, vector graphics can be scaled with no loss of quality. A small circle scaled up as a bitmap image (above left), and as a vector image (above right). Just as there are many raster formats – JPEG, GIF, PNG, BMP to name just a few – so there are also many vector formats. Most of them have grown from proprietary applications, such as AutoCAD’s DWG, or Adobe Illustrator’s AI, but one in particular is an open format, defined by the W3C – the same standards body that’s responsible for the HTML format that drives the web. Vector graphics are, by their very nature, scalable – but that didn’t stop them trying to make absolutely sure you know what you’re getting with their format: they called it “Scalable Vector Graphics”, or SVG.
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é.
Un petit cercle mis à l'échelle comme image bitmap (en haut à gauche) et comme image vectorielle (en haut à 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 Open, 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 doute aucun ce que vous obtenez avec leur format, ils l'ont appelé « Scalable Vector Graphics » (« graphique vectoriel adaptable ») ou SVG.
SVG files are plain text containing nested collections of “tags” in a similar manner to HTML files. There's a <circle> tag, a <line> tag, and so on. They can be modified using any text editor, though as an image becomes more and more complex it's usually easier to use a drawing program to edit them. Probably the best known software for this is Inkscape (www.inkscape.org) which can be found in the repositories of most Linux distributions, Ubuntu included, and is available also for Windows and MacOS. Inkscape uses SVG as its primary file format, which makes it a great tool for creating or editing SVG files, but which also places a limitation on the program's capabilities. With serious work now underway on defining version 2.0 of the SVG format, Inkscape should, hopefully, be able to make some ground on its proprietary competition over the coming years. The HTML-like structure of SVG files, together with their origins at the W3C, have made them the official standard for vector graphics in the web world. It has taken a long time, but most web browsers now natively support SVG files, and it's possible to mix them directly into HTML files – ideal for inline graphs or maps. The hierarchical structure of tags is also open to being modified by Javascript in the same way as HTML content, allowing for anyone with some web development skills to create interactive graphics. As is often the case, however, specific support varies between browsers, and some more advanced features of the SVG format may not display in the same way in all of them.
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 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.
So SVG is great for diagrams, interactive charts, and even artistic works, but it's got one other trick up its sleeve which elevates it beyond the inherent smoothness and simplicity of pure vector graphics: it also has some support for raster images. At the simplest level, it's possible to include a raster image in an SVG file, then draw lines and circles over it, or clip it into an odd shape using an SVG path. But raster images can also be used as fill patterns in SVG files: Inkscape ships with a few of them by default, and I've personally used the sand texture (which looks like the noise or snow on an un-tuned television) to help simulate stone, ash, bricks, and even a cornfield! Going further still, SVG has a concept of filters – mathematical operations that can be combined and applied to the rasterised pixels in your final image. The image is still made up of vectors, but once those vectors have been drawn, filters can create all sorts of grungy raster effects which would usually require a program like GIMP or Photoshop. Just look at how a little filtering can turn some semi-random vector blobs into an explosive fireball:
Ainsi, le SVG est super pour les diagrammes, les graphiques interactifs et même pour les œuvres 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 :
Some simple vector blobs… …brought to life with some SVG filters Whether you want to draw icons for an application using Inkscape, graphs for a website using Javascript, or abstract art using a text editor, SVG is a powerful and flexible format that promises even more in the years to come. So grab a copy of Inkscape using your package manager and get drawing. Useful Links: Inkscape: http://www.inkscape.org Inkscape User Forum: http://www.inkscapeforum.com Tango SVG Icons: http://tango.freedesktop.org/ W3C SVG Working Group: http://www.w3.org/Graphics/SVG/ Next month we'll have our first touch of Inkscape. Stay tuned!
De simples tâches vectorisées…
…prennent vie avec des 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 !
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 du W3C : http://www.w3.org/Graphics/SVG/.
Le mois prochain, nous aurons notre premier contact avec Inkscape. Restez branché !