Chapter 1 : Introduction

Extract

SVG is Scalable (Vector Graphics)

Until recently Web developers only had the option of using these bitmap graphic formats to render images in browsers.  The main bitmap graphic formats that are used on the Web today are: 

• Graphics Interchange Format (GIF)
• Joint Photographic Experts Group (JPEG)
• Portable Network Graphics (PNG) 

 Bitmaps graphics belong to a class of computer graphics called raster graphics.  Raster graphics are displayed by a method of filling in a matrix of pixels, which requires storing the information for every pixel of the graphic. 

 Vector graphics such as SVG and SWF formats are different beasts altogether belonging to another class of graphics that are rendered using short line segments called vectors.  Also, vector graphics contain geometric objects such as lines and curves.

 Although bitmap images do work very well in many situations, vector graphics open up a whole new world of possibilities in Web graphics.  For example compare the following two screenshots of the same SVG image.  This is the original view of this vector graphic.                 

Figure 1-3: Original size	Figure 1-4: Size after zooming in

 ( see this picture as svg )    

 Notice that we have not lost any quality.  This is because the vector-based viewers are able to recalculate how the graphic should look based on the textual description of the circle shape that is found inside of the SVG graphic.  This is a key advantage of SVG and raster graphic formats. 

Because vector graphics are defined programmatically they provide a more efficient means for rendering print and animation, as well as adding interaction (including panning and zooming) and analytical capability. 

One of the limitations of bitmap images is  how they describe graphics.  Bitmaps do not describe graphics as shape elements or objects but instead have to describe each and every pixel in the image.  Bitmaps can make use of efficient compression techniques and can be streamed because its data is stored serially, however as you will see in these screenshots the scalability of vector graphics is a tremendous advantage over raster images.

Figure 1-5:  Original image

  ( see this picture as svg )

Figure 1-6:  Vector image at 300%      Figure 1-7:  Raster image at 300%

The raster image becomes very pixilated when it is scaled while the vector image loses absolutely no image quality! SVG is a Vector graphic format. Now, you know why SVG is called Scalable Vector Graphics.