Game Development Reference
In-Depth Information
SVG
Scalable Vector Graphics
(
SVG
) for short, is an XML based format that describes
graphics. This format may seem complicated enough to be confused with a full blown
programming language for 2D graphics, but in truth it is just a markup language. While
SVG may seem new to some web developers, the specification was first developed
back in 1999.
The main difference between a vector graphic and a raster graphic (in other words, a
bitmap) is the way that the graphic is described. In a bitmap, each pixel is essentially
represented by three or four numbers, representing the color of that individual pixel
(RGB), along with a possible opacity level. Looking at it from a broader sense, a bit-
map is nothing more than a grid of pixels. Vectors, on the other hand, are described
by a series of mathematical functions that describe lines, shapes, and colors, instead
of each individual point on the entire image. To put it in simple terms, vector graphics
do a fantastic job of scaling its dimensions, as illustrated in the following screenshot:
If you zoom in or try to stretch a vector graph, it will always be as smooth as the ori-
ginal, since the shape is defined (and scaled) using the same mathematical functions
(as exemplified on the image on the left). Raster graphics, on the other hand, are only
defined by the same grid of pixels. Scaling that grid just means multiplying the dimen-
