Why Another Graphic Format - Vectors vs Bitmaps

SVG Overview > Why Another Graphic Format > Vectors vs Bitmaps

Why Another Graphic Format ? - Vectors vs Bitmaps

The vast majority of graphics on the Web today are raster graphics. Raster graphics also called bitmapped/ pixel-based graphics which are widely used over the Internet, by attaching to HTML documents using <img> tag. The most common formats are GIF, JPEG and PNG.

Bitmapped/Pixel-based graphics - are made up of little squares called pixels. Each pixel is assigned a specific location and color value.

Vector graphics - are made up of lines, curves, points and colors that are described mathematically.


Bitmapped/Pixel-based graphic	Vector graphic

Overall, bitmap format has its strengths, such as the ability to faithfully recreate photographic images, but it suffers from a number of limitations: Bitmap formats have to include every pixel needed to display a graphic, the files tend to be bulky, limited to a single, often low, resolution, and consume large amounts of bandwidth on the Web. Bitmaps are unable to use the Web's styling mechanism, and the images themselves cannot be panned or zoomed.

SVG's advantages over Bitmap

Being resolution and device independence, SVG overcomes the shortcomings of existing pixel-based graphics. SVG has many advantages over the bitmaps:

Zoomable. Users can magnify or pan their view of any portion of an image without sacrificing sharpness, detail, or clarity.

A magnified bitmap image usually results in jagged edges.

A vector image is magnified without loss of clarity.

Smaller File size. In SVG, only vector coordinates must be stored, but not the individual pixels. SVG files are much smaller and compressible than bitmaps, and quick to download.

Searchable & selectable text. In SVG, the mathematical descriptions used to create graphics are separate from the text. Text in SVG images can be easily editable and searchable. For example, you can search for specific text strings, like city names in a map.

Display independence. SVG images are always crisp on screen and print out at the resolution of your printer, whether it's 300 dpi, 600 dpi, or higher. You will never experience ugly "jaggy" bitmaps.

Superior color control. SVG offers a palette of 16 million colors, support for ICC (International color Consortium) color profiles, sRGB, gradients, and masking.

Interactivity & intelligence. SVG offers unparalleled dynamic interactivity. SVG images can respond to user actions with highlighting, tool tips, special effects, audio, and animation. SVG can easily be created by ASP, PHP, Perl or whatever, and extracted from a database.