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.
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.
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.
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:
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!