Flag of the United Kingdom
Andreas Rejbrands webbplats

Advanced authoring in Microsoft Word – Part 23: Introduction to vector graphics

When it comes to some kinds of (fundamentally non-photographic) images, such as illustrations and diagrams, it is possible to represent them in a more semantic way than as a grid of pixels.

For example, a few days ago I created the following image:

An illustration of a computer popup menu and a cursor.

Of course, it is possible to represent this as a grid of pixels. But there is also a completely different way to represent this image in a computer. Instead of representing it as a raster graphics image, that is, using an array of pixels, one can describe it as a collection of geometric primitives. That is, it is stored in the computer as a set of (coordinates for) lines, rectangles, and other paths, with associated formatting instructions. Such an image is called a vector graphics image, as opposed to a bitmapped (or raster graphics) image.

In fact, this is how I made the image above. I used an ordinary text editor to write the image by hand, using the SVG language:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="22px" height="24px">
<defs>
<style type="text/css"><![CDATA[
#menu, #cursor, .menuitem {
fill: white;
stroke: black;
}
#selection {
fill: black;
}
.menuitem.selected {
stroke: white;
}
]]></style>
</defs>
<title>The menu key</title>
<desc>The 'menu' key on a standard PC keyboard:
a popup menu consisting of four menu items and a cursor hovering above the second one.</desc>
<!-- Menu border -->
<rect id="menu" x="1" y="1" width="18" height="22" />
<!-- Selection -->
<rect id="selection" x="1" y="7.6" width="18" height="4.4" />
<!-- Menu items -->
<line class="menuitem" x1="4" x2="16" y1="5.4" y2="5.4" />
<line class="menuitem selected" x1="4" x2="16" y1="9.8" y2="9.8" />
<line class="menuitem" x1="4" x2="16" y1="14.2" y2="14.2" />
<line class="menuitem" x1="4" x2="16" y1="18.6" y2="18.6" />
<!-- Cursor -->
<g transform="translate(14 9.8) rotate(-30)">
<path id="cursor" d="M 0 0 L 3.5 7.5 L 1.25 7.5 L 1.25 12 L -1.25 12 L -1.25 7.5 L -3.5 7.5 z" />
</g>
</svg>

Whenever possible, you should use vector graphics instead of bitmapped graphics. There are many advantages to this:

Let us illustrate the second point by considering the following image. It is a smaller version of the popup menu icon:

An illustration of a computer popup menu and a cursor.

If the icon is magnified, the left image below shows the result if the icon is a bitmap image; the right image shows the result if the icon is a vector image.

The menu key icon magnified as a raster image; it looks very pixellated and bad. The menu key icon magnified as a vector image; it looks perfectly crisp.
The image [menu key icon] magnified as a bitmap image (left) and as a vector image (right).

Exercise in logical thinking and clear communication: Explain exactly why, as clearly as possible, you get these two very different results.

There are even more benefits of using vector graphics. If you display a raster image on a computer display that has higher resolution than the image was designed for, and you do not want the image to become smaller (you generally don’t), the image is effectively magnified, so it will look pixellated compared to the rest of the document. The same thing happens if you print an image, since printers generally have much higher resolution compared to standard computer monitors.

Unfortunately, Microsoft Word does not support the SVG file format, which is very sad, because the format is absolutely brilliant, and it is the format the rest of the world is using.

However, Microsoft Word does support the Windows Metafile (WMF) and Enhanced Metafile (EMF) formats. These are old (and to some extent obsolete) vector graphics file formats native to the Microsoft Windows platform. They are not editable using text editors, and they are not used much (read: at all) on the Internet or by contemporary third-party software, but they are still vector graphics.

Hence, if you want to include external images in a Microsoft Word document, and it is feasible to represent them as vector graphics (this excludes photographs but includes most types of diagrams and illustrations), you should make sure to use a vector WMF or EMF file.

This way the images will look perfect when scaled and printed; otherwise, they will look pixellated.

Personally, I always use my own mathematical software AlgoSim to create images for my mathematics and physics texts. I always save 2D illustrations (except for heatmaps) as Windows Metafiles. Here are a couple of simple examples from my text about multivariable calculus (represented as SVG files in this hypertext document).

An example of a vector image. An example of a vector image.
Two examples of vector images.

In conclusion, so far:


Visa alla tidigare notiser.

Visa enbart de senaste notiserna.