SVG Introduction and Viewers

By mbystedt on Nov 28, 2012, 9:05:49 PM

SVG stands for Scalable Vector Graphics. It is a W3C recommendation (standard). The most comparable graphics format to it on the web is Macromedia's Flash. SVG differs from Flash in how it generates its images. The fact SVG is xml means that it can be deeply embedded into webpages which can also be written as xml.

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. By using a XML stylesheet, a plain xml data document can be transformed and presented as a graphic.

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 could be written in SVG. The ability of SVG in building applications is a limited by the lack of a widget set for buttons and forms like HTML.

SVG animation elements allow the native triggering of animation without relying on a scripting language. This part of SVG is probably the worst supported feature so unless you're specifically targeting a platform that supports it the it's best to forget it exists.

It is recommended that all uncompressed SVG files have the extension ".svg" and that SVG files which are compressed using gzip have the extension ".svgz". Only Chrome currently supports compressed svg files.

SVG Viewers

This tutorial assumes you are using a browser that fully supports SVG or have a SVG plugin installed. Your best bet is to view it using the latest version of Safari, Chrome, Firefox or IE. Depending on your browser, you will notice different graphical problems. The point of the tutorial is to demonstrate the SVG 1.1 Specification so if there is an example that has problems in one browser then try another. Fortunately, it seems that at least one (usually Chrome) will now correctly support each example.