Have you ever wondered why you can zoom in on a piece of text in your web browser, PDF viewer, or word processor, and it still retains the smooth look it had at the original scale? In comparison, zooming in on a web image generally yields a pixelated or ragged-looking result. What gives text this resolution-independent property, and is it possible to extend this property to graphics in general?

Understanding Vector Graphics

A discussion of computer graphics should begin with the observation that there are two types of graphics: raster graphics and vector graphics. You're probably quite familiar with raster graphics – rectangular grids composed of individually colored pixels. Zooming in on a pixel-based raster image eventually results in either a blocky picture or a somewhat smoother result that often looks a bit blurred. This blurring or distortion is caused by an interpolation algorithm that generates new pixel data for the magnified version based on the values of neighboring pixels. On the other hand, vector graphics relies on mathematical descriptions of curves. These descriptions are resolution-independent, which means that vector graphics can scale without losing quality. The glyphs of a font that you look at on your screen are examples of vector graphics in daily life. If you're interested in taking a closer look at the curves defining these characters, install FontForge [1] (or alternatively, Birdfont [2]), and open a font you're interested in (commonly stored in /usr/share/fonts).

For a deeper look at vector graphics, it is very useful to install a dedicated vector graphics editor – the open source Inkscape is an excellent choice. Start by adding a circle, a (rounded) star, and a single character from your favorite font. Set the fill of all objects to none and the stroke to a solid light gray. Then, with all three selected, choose the option Path | Object to Path. Viewing the resulting paths in edit mode (F2) with everything selected should yield a result similar to the images in Figure 1.

Figure 1: Nodes and handles define a vector graphics object.

The squares (referred to as nodes) and round handles are all it takes to define these composite curves. A single curve segment consists of two of each: a node at each endpoint of the curve segment and a handle connected to each node to define the tangent – that is, the direction – of the curve at those points. These curves are known as (cubic) Bézier curves, and they were discovered in the French car industry in the early sixties by Paul de Casteljau and Pierre Bézier, who at the time were working at Citroën and Renault, respectively. Bézier curves are the fundamental building block of vector graphics. (Press B in Inkscape and click/drag on the canvas to create a new Bézier curve.)

When a curve consists of multiple segments, nodes usually have handles on both sides. If a node and its two handles lie on a single line, the connection between the two segments is smooth (or tangent-continuous in mathematical language), which is often desired in a design. Most nodes in Figure 1 are smooth nodes, with the exception of some nodes defining the outline of the character S from the Linux Libertine font, which are sharp nodes.

Bézier curves facilitate the design of intricate 2D shapes. You can design these shapes manually or obtain them automatically – in Inkscape, a raster graphic can be traced using the option Path | Trace Bitmap.

The fill of paths can be set to a single color, though that probably won't result in something quite lifelike. A linear or radial gradient brings the result a bit closer to life but is still rather limiting.

For something better, consider a rectangular curve network, where each cell is defined by four Bézier curves. Something like the 2x2 curve network in Figure 2 will do for now.

Figure 2: A 2x2 curve network.

The curves can be moved around freely, though the nodes at path intersections are connected to each other (something which currently cannot be done in Inkscape in edit mode). Take, for example, the central node, which is connected to four curve segments, or in other words, is a corner of four cells.

Next, assign a color to each node, which you could visualize as shown in Figure 3.

Figure 3: Assign a color to each node…

Finally, interpolate the assigned colors over the interior of the cells. You can interpolate in a variety of ways – using cubic interpolation (the same type used by the Bézier curves, but now in both directions) is a reasonable choice resulting in a smooth color propagation (Figure 4).

Figure 4: … and then interpolate the node colors to fill in the cells.

The overall concept is known as a gradient mesh, and it was added to Adobe Illustrator as a new vector graphics primitive in 1998 following the introduction of PostScript 3. Soon after, it also became available in CorelDRAW, and nowadays it is available in Inkscape as well. The gradient mesh feature facilitates the design of lifelike graphics that are fully scalable.

Refinements?

After using the gradient mesh tool for a while, you'll probably become aware of certain shortcomings. For one, if you want to add more detail to your shape, you'll likely need more cells. But because the gradient mesh is inherently stored as a rectangular curve network, you'll end up with an entire new row and/or column of additional cells. These unneeded cells can quickly clutter the workspace and slow down your machine. Instead, a local approach would be much better, though it requires a more sophisticated data structure. The example in Figure 5 shows the difference between a global (standard/traditional) and a local (improved) refinement of a gradient mesh.

Figure 5: Global refinement (left) often adds superfluous cells. Local refinement (right) allows you to add cells only where desired.

Secondly, the network's rectangular nature itself is rather limiting – modeling an arbitrary object as a deformed curved rectangle is not exactly intuitive. Although several gradient meshes can be placed on top of each other to partially remedy this, this approach is not very user-friendly. Instead, letting go of the rectangular nature of the curve network altogether provides much more freedom. Although maintaining a smooth color propagation in such a flexible setting poses a mathematical challenge, it is certainly possible.

Another obstacle is the assignment of sharp transitions in color, which requires a minor modification of the data structure. The examples in Figure 6, 7, 8 and 9 showcase the three improvements I just described.

Figure 6: A wheel of Gouda cheese modeled as a gradient mesh supporting local refinement and sharp color transitions.

Figure 7: Husks of the Chinese lantern plant (Physalis alkekengi) modeled using all three improvements.

Figure 8: Different visual stages of an improved gradient mesh.

Figure 9: A plum modeled using all three improvements. Local refinement is particularly effective for modeling specular highlights.

As of the time of this article, vector graphics editors only support the traditional version of the gradient mesh (the examples in Figures 6-8 were generated using my own software, which was developed as part of my PhD). We hope that graphics developers will add these advanced features to the leading open source vector graphics editors in the near future. Nevertheless, digital artists have created some quite sophisticated digital artwork using gradient meshes – a quick search on DeviantArt [3] shows how realistic you can get with common vector graphics tools.

Other Improvements

Just as shapes composed of curves can be traced automatically, raster graphics can be automatically vectorized into gradient meshes by external tools. This fact makes it possible to create resolution-independent versions of existing art, which can then be displayed and printed at any size without losing quality. An added benefit is that a vector representation can be much smaller than a raster representation of a medium to large image – in other words, vectorization could also be used from the perspective of file compression.

In addition to the gradient mesh, there is a second primitive known as diffusion curves that aims for the same goal – scalable photorealistic images. The necessary steps are as follows. First, the outline and inner detail of a shape are designed using Bézier curves. Then, a color gradient can be assigned to each curve. Finally, these assigned color profiles are then diffused throughout the interior, producing smooth results. In addition to curves, individual color points can be added that also diffuse their color around them. This is evidently much closer to the workflow of an artist, and therefore more intuitive to use than gradient meshes. Although the concept has been around for over a decade, it got introduced as a primitive in Adobe Illustrator only recently under the name freeform gradient – you will find some demonstrations and how-to on YouTube.