One of the most exciting technologies to appear in recent years is SVG (Scalable Vector Graphics). In developing for the Web, we've become used to JPEG and GIF files and Flash animations. Dynamic HTML has also been used for animation and achieving a high degree of interactivity.

However, SVG has the potential to surpass these formats and create a whole new style of graphics and dynamic page generation. This potential is due to several factors:

SVG is text-based

You don't need special tools to create SVG graphics (although tools will certainly improve productivity). You can create SVG graphics with text editors such as Notepad or emacs.

SVG is XML-based

It is a straightforward process to take data in XML format and use that data to generate SVG graphics. This can be done statically or dynamically on the server or in the browser!

SVG has powerful features

Various filter capabilities (blurs, gradients, lighting effects) are builtin. Powerful animation features (based on SMIL) can be controlled through user interaction.

SVG is programmable with JavaScript

SVG elements are exposed through the Document Object Model. JavaScript can create and manage graphical elements and animation over time or in reaction to user events.

SVG is scalable (duh!)

The user can zoom in and out and pan across an image with out losing quality. In fact, the quality improves as the image is zoomed.

SVG is compact

Because SVG describes vectors (shapes, paths, etc.) instead of individual pixels, files sizes can be much smaller.

SVG is an open standard

Unlike Flash, SVG is not defined and controlled by a single company.

In order to work with SVG at the source level, you should have some knowledge of XML, CSS and JavaScript. You don't have to be an expert, but it helps to have had some experience.

Browser Support

Currently, you need to download and install an SVG Viewer (Adobe has the most popular one) in order to display SVG. All you need to create an SVG image is a text editor.