1 of 2

Write now Article Tools

You've probably heard of Flash and seen all sorts of movies and games using it. You may even know that the format is swf and Flash is merely the main authoring program. You may also know that it's a vector format. However there's another graphics format which can be used on the Internet and is even natively supported by some browsers. What's more it's a non-proprietary W3C standard, uses XML and can be created and edited with free software. This is SVG (Scalable Vector Graphics).

It's easy to create simple SVG pictures by typing the code into notepad much as you'd create a web page. If you're not that technically minded or want to do something complicated with SVG, you can export it from programs like Corel Draw or Adobe Illustrator or use a free program like Inkscape. Inkscape comes with very good documentation and it's quiet user friendly (to draw a rectangle, click on the button with a rectangle on it and drag the mouse to the appropriate size). You can add animation and/or interactively to your SVG with JavaScript and/or SMIL. SVG also works with CSS (cascading style sheets) so you can have multiple files with similar styles and they can be the same as your (X)HTML pages. To save memory and download time, SVG can be gzip compressed to SVGZ which can be displayed by browsers.

Because it's a non-proprietary format, anybody can write authoring software. It's fairly easy to write a CGI script in Perl (there are a number of SVG related modules) which generates SVG in response to user input.

Vector graphics store pictures as a collage of shapes, lines, text, bitmaps etc.. They don't pixelate when enlarged (except for any bitmaps they may contain) and normally take up less memory than the equivalent bitmaps (formats like gif and jpg). It's even possible to search the text they contain. Then they have much more capacity for animation and interactivity than bitmaps.

SVG code is a form of XML (similar to HTML and even more like XHTML - which are used to write web pages). Because it's ASCII, it can be created and edited with simple text editing software. If you're familiar with XML, it should be easy to follow the basic syntax. If not, then this is a fun way to learn XML.

As well as basic shapes like rectangles and circles, there's a path element which can draw any shape, even squiggly ones. There are several ways to specify what color to fill you shapes with (or not) and if they have an outline and what color (thickness, if it's dotted etc.) that is. Objects can be grouped and have attributes applied to all members of the group or they can be changed together. You can also have links in your SVG, just like a web page.

SVG has some advanced graphics features like transparency, gradients, filters, pattens and clip paths. These can be used to make the picture more natural looking than you'd expect for vector graphics, almost like a bitmap! For interactivity, SVG files can respond to mouse movements, clicks and keyboard input. For animation, things can be changed in all sorts of ways. Objects can move across the screen, change color, (dis)appear suddenly or gradually fade in and out.

To view SVG files, you used to need a plug in. The Adobe SVG viewer is still available and another (Renesis) is in development. Firefox and Opera now have native SVG support as soon will Safari.

So far SVG has mostly been used for graphs, maps, GUI's etc. but it has all sorts of possibilities as the software improves. I use if for web comics.

Next time you're considering a computer graphics project, take a look at SVG and see if that can do the job.

Learn more about this author, Richard Pearman.
Click here to send this author comments or questions.

Add your voice

Know something about Introduction to Scalable Vector Graphics or SVG?
We want to hear your view. Write now!