Ceci est une ancienne révision du document !
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é.
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, bien que lorsqu'une image devient de plus en plus complexe, le recours à un programme de dessin peut s'avérer bien plus facile. Probablement le plus connu des programmes pour cette tâche est Inkscape (www.inkscape.org), que vous pouvez trouver dans les dépôts de la plupart des distributions, y compris Ubuntu, et également disponible pour Windows et MacOS. Inkscape utilise le format SVG par défaut, ce qui peut être un formidable outil pour créer ou modifier des fichiers SVG, mais ce qui limite également les possibilités du programme. Avec un sérieux travail maintenant 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 dans les années à venir.
La structure à la sauce HTML des fichiers SVG, les deux ayant leurs origines 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 beaucoup de navigateurs supportent nativement les fichiers SVG et il est possible des les insérer dans des fichiers HTML - idéalement pour des graphes ou des cartes en ligne. La structure hiérarchisée des tags est aussi ouverte pour être modifiée par du Javascript, de la même manière que du contenu HTML, permettant à quiconque avec quelques compétences en développement web de créer des images interactives. 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 apparaître 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 oeuvres artisitiques, mais il a un 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 clipper dans une forme utilisant un chemin SVG. Mais les images raster peuvent également être utilisées comme motifs 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 aider à simuler une pierre, de la cendre, des briques et même un champ de blé !
En allant encore plus loin, le SVG a un concept de filtres - 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 que ces vecteurs ont été 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 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 pour les années à venir. Donc, récupérez une copie d'Inkscape en utilisant votre gestionnaire de paquets et dessinez !
Liens utiles: Inkscape: http://www.inkscape.org. Forum des utilisateur d'Inkscape: http://www.inkscapeforum.com. Icônes SVG de la collection Tango: http://tango.freedesktop.org/. Le groupe de travail SVG du W3Cp: http://www.w3.org/Graphics/SVG/.
Le mois prochain, nous aurons notre premier contact avec Inkscape. Restez branchés !