Developer

SVG: An XML approach to graphics

The SVG graphics file format contains both content and XML. This can have some big advantages over bitmaps. Learn more about this format and how it might make programming easier.


The Scalable Vector Graphics (SVG) standard (version 1.0) was recommended on Sept. 4, 2001, by the World Wide Web Consortium (W3C) for describing two-dimensional graphic objects. SVGs are going to be one of the next big things in the online world because they incorporate both content and XML in a graphics format. In this first of two parts, we will examine what SVGs are and explain a little about how they tick.

What is an SVG?
An SVG is a new file format for describing graphics images using XML. A scalable vector format is different from a bitmap, or raster, graphic format. With a bitmap image, the file contains a series of bits that, when rendered according to a particular color palette, displays the desired image. The bits in the file create a map of what the image looks like. With a vector image, the file contains instructions on how to draw the image; by following these instructions, the image is rendered. The advantage of vector images is that they can be scaled into much larger or smaller sizes without any loss of image quality. When a bitmap image is enlarged, there will be missing pieces, which must be filled in order to make the image look complete. There are a variety of algorithms that will interpolate the missing pieces; however, depending on the image, the interpolations will most likely introduce distortions into the image. With a vector, this doesn’t occur because the drawing instructions remain the same. Only the parameters that describe the size of the image are adjusted.

Content-based
Among the major features of the SVG format is the ability to isolate content. In a typical JPEG or GIF image, the entire graphic is stored as an image or snapshot of what the image looks like. With an SVG image, any content (such as text data) can be stored and rendered appropriately. This also allows you to manipulate and search for content. Imagine for a moment a GIF-based chart. To modify the chart to incorporate new data, you would need to render a new image. With SVG, it’s possible to manipulate the underlying XML to include the new or modified data so that the next time the image is viewed, the data is current.

Animation
SVG images also enable you to include animation. Unlike other static graphic formats, SVG provides the facilities for manipulating the SVG document via scripts and thus the capability to provide animation. The basic concepts of animation in an SVG include the ability to manipulate a scalar property or a vector object over a period of time. Manipulations include size, position, and color, among other attributes.

Beyond the basics
So far, we’ve talked about the fundamental characteristics of SVG images. Next time, we’ll look at some of the XML behind SVGs, additional features, and online resources offering more information about SVGs.

Editor's Picks

Free Newsletters, In your Inbox