Understanding Vector Graphics

SVG stands for Scalable Vector Graphics, but what does that mean?

Vectors, in mathematics, are numerical representations of movement or of a difference in two states. They describe how to get from here to there. Usually represented as a list of numbers, they break down the overall change between the two states into the net displacement as measured in different, independent dimensions. For 2D graphics, the dimensions are usually horizontal (x) and vertical (y).

Vector graphics consist of mathematical descriptions of shapes as a combination of these numerical vectors. Because the vector graphics define the path that the lines should take, rather than a set of points along the way, they can be used to calculate any number of points, and so can be used at any image resolution.

Vector graphics form the basis of many computer applications, and they’ve been around almost as long as the personal computer. The DWG (“drawing”) format—used by AutoCAD and other computer-assisted drafting software—and the PostScript language—used in Adobe’s desktop publishing software, and later in PDF—were both developed in the early 1980s.

For drafting, the mathematical precision of vector graphics is essential. For publishing, the key benefit was the ability to create high-resolution printed documents, without requiring the position of every drop of ink to be encoded in the computer file.

Computer printers do not (usually) draw vector graphics directly, tracing along the lines like you would draw a shape with a pen. However, by using a set of vector shapes to define the boundaries of what a letter or image looks like, a program can test whether any given point is within that boundary. As the printer head moves across the page, the software tells it whether to drop or not drop a spot of ink at any given point.

The software can calculate which pixels on the screen would fit within the shape outlines, in a process called rasterization. The word comes from the latin for “rake”, and refers to the way the image is calculated as a series of parallel lines, like the lines made by the tines of a rake across the ground. The rasterizer software calculates when each of these raster-line crosses an edge in the vector graphic, and changes the color when it does.

The same principles are used in TrueType and other vector font formats. Rather than storing separate, pixelated representations for each possible size of text, vector fonts often only need one set of shapes, regardless of size.

Figure 1-X1 simulates the rasterization process. The gray dashed line represents the vector outline of the shape, which is the same mathematically-defined curve regardless of the display resolution. The dots of ink, or pixels of light, fill in the shape in neat rows.

The number of rows and dots that fill in the shape are quite different between a low resolution and a high resolution printer or display. However, the overall size and shape is the same, except for a slight jaggedness (pixelation or aliasing) around the edges on the low-resolution display, caused by the fixed size and spacing of the dots. This jaggedness is often minimized by partially coloring the edge pixels to smooth out the curves (anti-aliasing).

With aliasing, all the colored dots that are cut by the edges in Figure 1-X1 would be either full circles or removed completely. With anti-aliasing, they would be full circles, but at a reduced color intensity. The edges of anti-aliased shapes can therefore sometimes look blurry, instead of jagged.

Raster graphics are the opposite of vector graphics; these are directly encoded as the rows (raster lines) of final pixel colors for each point in the image grid. Viewed at the correct resolution, the human eye connects up those points into lines and shapes, but the underlying graphic doesn’t include any information about those shapes.

Raster graphics are also known as bitmap graphics, because originally the data (bits) in the file could be directly mapped to corresponding pixels in the output. Today, most raster graphic formats employ some form of compression, to reduce the total number of bytes necessary to encode the graphic.

When SVG was first proposed in the late 1990s, bandwidth was at a premium. The principle advantage of vector graphics on the web was that high-resolution (but graphically simple) images could be defined with small file sizes.

You can display the graphics at any size, for screen or print, without causing smooth curves or diagonal lines to degrade into jagged steps. The images scale cleanly whether they are rendered at 1% of the original size or 100 times the original size. Mathematical transformations—scaling, rotating, or skewing—of the image do not change the underlying information about the graphic itself. So if you add a transformation, and then later decide to remove or change it, you haven’t lost any information.

Raster graphics, on the other hand, are considerably more sensitive to scaling. If you double the image’s dimensions, the display will have to interpolate new color values from the old, making the image appear soft and out of focus. If you then reduce that image to one half its original size, that same graphic has to throw out information. Take that reduced image and blow it up by a factor of four, and the image ends up interpolating data that may or may not be accurate, and the image gets even farther out of focus. Rotations can create jagged artifacts, skewing can introduce more artifacts, and successive transformations can leave an image looking like it went through a wormhole in space.

In other words, all vector graphics are scalable, while raster graphics for the most part are not.

In general, vector graphics are:

• Described by instructions or functions rather than by pixels.

• Resizable and transformable, without losing information.

• Often smaller filesizes to encode high-resolution graphics.

It is worth noting that many raster image software tools incorporate some vector graphics encoding. Even photo-processing applications like Photoshop or GIMP use vector graphics to combine layers, manipulate text, or apply some effects. However, most of these vector encodings are not available to end users or developers—they are locked up deep within the application layers of these respective programs. (Although some of these programs now support some degree of SVG export of this hidden vector data!)

Similarly, SVG (and other vector graphics, like PDF) can incorporate bitmap images as an element of the graphic. These bitmaps do not get the scaling benefit of vector graphics; while they can certainly be scaled, the images will lose resolution the same way scaling any bitmap will. However, the SVG code can be used to modify bitmap images or composite multiple bitmaps—mask areas off, scale areas, apply underlays or overlays, generate drop shadows, and so forth—and these effects can be applied regardless of the resolution of the bitmap image. This makes it possible to build layout tools for raster graphics with SVG.

Declarative animation adds a new dimension to the vectors—time!

Declarative vector animations (including both CSS animation and SMIL animation elements) define how a property should change over time, and let the browser fill in the specific in-between values. While videos and other animated image formats (such as GIF) define a fixed number of individual frames, vector animations will adapt in frame rate according to the capabilities of the device. Slowing down or speeding up the animation is also simple, just like scaling the image in space.

Because vector graphics languages describe images and animation as a series of discrete instructions for each shape or line, they could logically be translated into an element-based document object model (DOM) of the sort used for HTML and XML. And that’s where SVG comes in.

SVG uses an XML markup format and CSS styles, so it can be edited and processed with existing tools used by web developers.

Text in the graphic is plain text in the file, so it is easy to edit—and in the right software, it isaccessible to screen readers and to user interaction.

The SVG image is represented using a live DOM (document object model) inside the browser, so it can be manipulated with JavaScript, often with only slight changes to code that was built for working with HTML documents.

Working with vector graphics—especially in web browsers—can be more frustrating than working with raster images. Much more of the final appearance is controlled by the rendering software. The SVG in the browser may not match the image in your graphical editor. Browser bugs and missing feature support become a constant concern. But just as when working the HTML, CSS and JavaScript, the solution is to plan your project with fallbacks in mind, and to test your work in many browsers.