As Internet Explorer 9 (IE9) moves into the forefront, scalable vector graphics (SVG) is coming into focus, as well. SVG is not new, just under utilized until recently. This format of image construction uses XML to describe two-dimensional vector graphics. Until IE9, Internet Explorer did not support SVG without an additional plug-in. That greatly stunted the growth of this vital XML-based file format, but that all changes with IE9.
History of SVG
The development of scalable vector graphics began in 1999 and some big names had their hands in the SVG pot. Companies, such as Adobe, Apple and IBM, all took part in defining and creating this new feature. In 2001, SVG got a facelift to include mobile profiles, print capabilities and improved display properties. One draw back has always been the lagging Internet Explorer. Other browsers already make use of SVG, but IE was behind in the game. With version 9, Internet Explorer will be compatible with SVG and you should start seeing an expansion of the format.
Advantages to SVG
When discussing graphics, terms like JPEG and GIF are probably what most novice designers recognize. There are advantages to using SVG instead. SVG files are smaller and easier to compress than other formats. Graphics with SVG will print in a higher resolution. Editing of SVG can be done with even rudimentary tools, such as Notepad. SVG images are zoomable and scalable. Like other graphics, SVG works as a static or animated image.
SVG Basics
SVG works within the XML environment. This means the XML language creates the picture. Essentially, you use XML to describe what the image should look like by utilizing attributes. SVG uses predefined shape elements in the design process. The elements are very basic. For example, <circle> draws a circle. You use attributes to define the coordinates, such as radius, color and border.
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="1" fill="blue"/>
This creates a blue circle with a thin, black border. The circle will be 40 pixels in radius and sit at specified coordinates on the page.
This is a very sparse example of SVG in action. SVG works within XML. This means, it needs a declaration statement, root element and namespace.
There is certainly much more to working with SVG then the basics. Animation, filters, gradients all are available when creating SVG images. Like anything worth knowing, SVG takes some practice. However, with Internet Explorer coming into the SVG arena, it should be time well spent.