What is SVG?

SVG stands for Scalable Vector Graphics. It is a W3C recommendation. The most comparable graphics format to it is Macromedia's Flash.

SVG is a feature rich two-dimensional graphics language which allows for the combination of vector graphic shapes, raster images (jpeg, bmp, png, etc) and text. These graphical objects can be grouped and have nested transformations, clipping paths, alpha masks and filter objects. These groups can then be used as templates for new objects. SVG documents are described in XML so they can be easily generated and read by programs.

SVG also includes a rich set of event handlers which can call scripts (usually written in Javascript) which manipulate the graphics in the SVG's Document Object Model (DOM). This approach is quite similar to Dynamic HTML (DHTML). Entire applications can easily be written in SVG. Currently, SVG lacks a standard widget set for buttons and forms but XForms will soon correct this.

SVG animation elements allow the native triggering of animation without relying on a scripting language.

This tutorial assumes you have an SVG plugin installed. If you don't have one installed please download and install a SVG plugin. The SVG plugin from Adobe is probably the best choice for Macintosh and Windows machines. Firefox 1.5 has only basic support for SVG and many examples in this tutorial will not work with it. (See: Firefox SVG Information)

This tutorial is based on the SVG 1.1 Specification which became a W3C Recommendation on January 14, 2003.

An SVG document can be added to a webpage by using either the <embed> tag or the <object> tag. The second tag is valid with current HTML and XHTML standards and the <embed> tag is not. But, not all browsers properly support the <object> tag. In fact, Apple's Safari browser used to quit when it found one and still does not properly support it. Thus, most websites use the <embed> tag despite the fact it isn't valid.