What is SVG

Scalable Vector Graphics

Circles
Public Domain

SVG, or Scalable Vector Graphics, are not new to website design. These powerful graphics have just been very much 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 changed with IE9 and with other modern Web browsers like Chrome which support this image file format.

History of SVG

The development of scalable vector graphics began in 1999 and some big names had their hands in the SVG pot. Companies including Adobe, Apple and IBM all took part in defining and creating this new image type. In 2001, SVG got a facelift to include mobile profiles, print capabilities and improved display properties. One draw back that initially kept many web designers from embracing this format was the lagging support Internet Explorer. Other browsers already make use of SVG, but IE was behind in the game until they released IE9.

Advantages to SVG

When discussing graphics, terms like JPEG and GIF are probably what most 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 because they are vector images.

This means that the lines are not made up of pixels of color the way that Bitmap images (JPG, GIF, PNG) are. Vector graphics are mathimatical calculations of lines, meaning those lines can be scaled without losing any quality.

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, draws a circle. You use attributes to define the coordinates, such as radius, color and border.

 

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 basic 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. You can even animate SVG files with CSS!

Like anything worth knowing, SVG takes some practice, but the potential advantages of this image file format make it well worth the investment of time.

Edited by Jeremy Girard