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:

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:

• The file size is much smaller. The above text is only 1.2 kB (ASCII or UTF-8). This should be compared to the 5 kB required if you save the above image (at the size above) as a PNG image.
• You can magnify and scale the image any way you like (such as making it 100 times larger), and there will never be any pixellation. It will always look perfectly crisp.
• It is very easy to change the image after it has been created. Instead of manipulating each ‘pixel’ manually, you can simply change the geometric primitives and their presentational attributes.

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

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.

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).

In conclusion, so far:

• If an image can reasonably be represented as a vector image, use the WMF or EMF file format.
• Otherwise, for illustrations, diagrams, screenshots, and most other types of non-photographic images, use the PNG file format.
• For photographic images, use the JPG format (with not too much compression).