October 26, 2004

Making vector graphics out of bitmaps with Frontline and Autotrace

Author: Preston St. Pierre

Graphic designers prefer to work with vector-drawing applications because they can manipulate the shapes of the designs themselves, rather than the pixels that form the design in a raster image. When you need to create a vector-based image out of a raster-based image, you have two choices: trace it out yourself (via mouse or graphics tablet), or use a specialized program to automatically trace and convert it for you. For Linux users, a pair of programs called Autotrace and Frontline are just what the doctor ordered, finding the edges and curves in the raster image, tracing the result, and generating a vector image that you can work with in a program like Inkscape or Sodipodi.

Autotrace is a command-line program written by Martin Weber; Frontline is its GTK front-end by Masatake Yamato.

You can run Frontline as a standalone application or call it from within another image editor like the GIMP. To see how it works, install and launch Frontline and pick a bitmap or PNG file to work with. As an example, I have chosen a sketch of a sawfish cartoon, originally drawn on lined notebook paper then scanned.

The main Frontline window displays a file selection box at the top labeled Image; Trace and Close buttons at the bottom; and a field of 16 checkboxes and sliders in between that control your options. Frontline lets you tweak settings and retrace your image as many times as necessary before you save the result, which is useful because there is no "best" configuration; every image is different and requires tweaking.

Here is a rundown of the available options and the effects they have on tracing. All are available discuss related options together.

General options

  • Background Color -- If the image you are tracing has a background color, you can select it here and Autotrace will ignore it; otherwise the tracing algorithm will draw a polygon filled with the background color.
  • Color count -- When set to zero, Autotrace will trace out separate regions for every color that it finds. If you image has a lot of colors (as a photograph or a scanned image might) you can tell Autotrace to reduce the palette to as few colors as you want.
  • Despeckle Level -- This sets the degree to which Autotrace blurs regions with similar colors when searching for edges. Too little despeckling and your image will have wiggly lines caused by discrete pixels; too much and your image may turn out looking like a cubist-period Picasso.
  • Despeckle Tightness -- When using the above Despeckle setting, you can alter how wide of a region the algorithm looks at to find regions of similar color.
  • Filter Iterations -- The number of passes made by the smoothing algorithm; default is 4.
  • Error Threshold -- Autotrace first finds edges in the bitmapped image, then tries to fit them together into shapes. The error threshold determines how many pixels a curve may be off by and still be joined with its neighbors into a shape.

Finding corners

The next set of options deal with how Autotrace determines where to put a corner point.

  • Corner Surround -- Autotrace examines this many pixels on either side of a point when trying to figure out whether that point is a corner.
  • Corner Threshold -- The maximum angle (in degrees) that a set of pixels can meet at and be marked as a corner. How many pixels are in this set is determined by the Corner Surround setting mentioned above. The larger this angle is set to, the more corners will be marked in your image.
  • Corner Always Threshold -- This setting is just like the Corner Threshold above, except that this setting forces a pixel to be marked as a corner even if it is right next to another pixel marked as a corner.
  • Remove Adjacent Corners -- As you can probably guess, checking this removes multiple corners that are right next to each other from the trace.

Lines

These options all deal with finding straight lines and line segments.

  • Line Threshold -- Whenever Autotrace finds a spline curve, it compares it to the straight line you would get by connecting its two endpoints. If the spline is within the line threshold value of the straight line, Autotrace will simplify it to a line segment.
  • Line Reversion Threshold -- This setting attempts to do the same thing as Line Threshold: reduce nearly-straight spline curves to simpler lines. But whereas Line Threshold simply judges the distance between the curve and its straight line, Line Reversion Threshold weights this measurement by the length of the spline.
  • Tangent Surround -- The number of points Autotrace will examine on either side of a point when computing the tangent line at that point. The higher this value, the more "global" the tangent.

Centerline traces

The last few options deal with centerline traces, a different usage of Autotrace.

  • Centerline -- By default Autotrace traces out the outlines of the shapes in the image; selecting this option will cause it to return the centerline of these shapes instead, which can result in some rather unusual art.
  • Preserve Width -- This setting preserves the width of lines when using the Centerline option; by default Autotrace thins them.
  • Width Weight Factor -- The amount to which linewidth influences the algorithm when deciding which line segments to join together.

As you can see, a lot of these options control rather low-level aspects of the tracing and drawing process. With several of them, it is hard to imagine exactly how they will change the output of the trace, which is why Frontline gives you a good preview window, so you can test out how varying each of the options affects your results.

You can click the Trace button immediately with all of the options on their defaults; this lets you compare the effects of your tweaks to a baseline. For my sawfish, the default settings tell me the trace will require 556,907 splines and 559,989 points -- much higher than I want to work with. Fortunately, Frontline knows that this is an unreasonable number as well, and pops up a warning box asking for verfication, so I can click "Cancel" and begin tweaking.

The first thing I do is set Color Count to 2, since my drawing is in black and white. This results in a 2,385-spline, 2,877-point trace. I'd still like to bring those numbers down to three digits, so I turn on the Despeckle at Level 4 and increase the Error Threshold to 4. This gives me the 1,087-spline, 1,559-point trace in figure 2. Better, but I'm not satisfied yet.

Tips and tricks

Here are the general rules I use when manipulating the options. When the trace is picking up artifacts that you do not want to be part of the image -- stray spots, construction lines -- the Despeckle and Filter Iterations options are useful. This works especially well with a scanned drawing, because of artifacts on sheets of paper.

Error Threshold and the four Corners options are useful when the trace captures the overall shape of the image correctly, but makes too complex a drawing, with an excess of corners, undulating wobbles where a smooth curve belongs, or wispy hairline artifacts.

The Line options are most useful when the trace seems to be oversimplifying the image, making it appear too "geometric" or not fluid enough.

I almost always use Color Count and Background Color when working with a scanned image.

With this image I settle for a 731-spline, 1,091-point trace. It takes some experience with Frontline to know when your trace is of managable size, but you can always keep Frontline open and try again until you get it right.

After exporting the trace to an SVG file, I still need to do some cleanup work in Inkscape, as will always be the case with automated tools doing "machine vision" tasks. Since this drawing originated on paper, there are tiny spots that must have been barely visible to the eye, but which were picked up and made into tiny closed spline curves. I also find several curves that need to be split into separate pieces or joined with their neighbors, something I can determine by knowing what the drawing is supposed to be, but which an algorithm like Autotrace can't be expected to know. The final product is figure 3; let the jokes about my artistic talents begin.

If you are using Frontline and Autotrace to convert a computer-generated image, you will face a different set of artifacts -- jagged edges caused by hard pixel boundaries and general oversimplification are what I notice the most. Still, it is much easier to make changes to a vector image than a bitmapped one.

We're at the point now where SVG support for iconsets and themes in GNOME and KDE is solid (and hopefully Mozilla will be joining them shortly). But converting all those raster theme images and icons doesn't have to be a pain, thanks to Autotrace and Frontline.

Click Here!