SVG Basics – Introduction
What is SVG?
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 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.