Vector and Raster Graphics

Raster Graphics

Most traditional images such as pictures, drawings, and photos are stored in raster graphics format (bitmap). A bitmap is a 2 Dimensional array, where each element in the array represents a pixel of the image. Depending on the format, a pixel can be represented by 8 bit (256 color palette) or up to 32 bit (RGBA Red, Green, Blue and Alpha for transparency) .

Therefore, when a bitmap picture is rendered on the screen or on the display media, each pixel directly corresponds to the pixels on the display media. In fact, bitmaps have been very popular since they are very easy to be created, stored and displayed.

However, when it comes to processing or manipulating the image, bitmap images are not very easy to be processed. For example, scaling or shearing a bitmap image requires a lot of computational power and complex image processing algorithm. When a 640x480 bitmap image is enlarged to 1280x960 bitmap image, a pretty good interpolation algorithm is necessary to fill space of extra 640x480 pixels. In fact, even with the cutting-edge interpolation algorithm, the result is not very satisfactory; the resulted image is more blurry than the original one.

Vector Graphics

In order to overcome the drawbacks of image processing, raster graphics need to hire the power of vector graphics. In fact, vector graphics has long been used to represent images in computer graphics. In vector graphics, images are seen as mathematical geometric shapes and models, instead of 2D array of pixels, and geometric shapes are defined and represented as vectors (with the magnitude and the direction from the reference frame).

For example, in vector format, a line is represents as (xt + x0, yt + y0) or simply as Rt + R0, where R0 is the origin or point of reference. In this case, a line can be rendered any length by changing the range of t values. Similarly, any other geometrical shapes can be rendered without much difficulty as long as they are defined in vector format.

It all sounds good. However, there are 2 major drawbacks: one is it is sometimes difficult to define arbitrary geometrical shape in vector format; the other is it requires a rendering engine which can interpret the vector format and render the image.

Integration of Vector and Raster Graphics on HTML

Over these few years, world wide web has become an integral part of IT and Computer Industries. Yes, with cloud computing, web technologies are providing more and more desktop like computational environment. Needless to say, in order to be like desktop, the web browser should be able to render images like desktop screen.

Until recently, even with the styling formats with CSS, HTML can only provide Raster Graphics. Yes, there are some interactive vector graphics web applications, also known as RIA- Rich Internet Applications. But they are using embedded client virtual machines, such as Adobe Flash, Java Virtual Machine or Microsoft Silver Light, to render the vector graphics.

With the introduction of HTML 5, HTML is trying to provide both Vector Graphics and Rendering Engine on the Web.

In HTML 5 specification, vector graphics are defined in SVG (Scalable Vector Graphics) format and "Canvas" HTML tag can provide rendering screen where vector graphics are to be rendered and displayed.

Indeed, with the HTML 5 specification, the future web applications will be more and more interactive and desktop-like.

References

(1) http://www.w3.org/Graphics/SVG/
(2) http://dev.w3.org/html5/spec/Overview.html

Posted in: Programming,Software