Image tracing

From Wikipedia, the free encyclopedia
  (Redirected from Raster to vector)
Jump to: navigation, search

In computer graphics, image tracing, raster-to-vector conversion or vectorization is the conversion of raster graphics into vector graphics.


This image illustrates the difference between bitmap and vector images. The bitmap image is composed of a fixed set of pixels, while the vector image is composed of a fixed set of shapes. In the picture, scaling the bitmap reveals the pixels while scaling the vector image preserves the shapes.

An image does not have any structure: it is just a collection of marks on paper, grains in film, or pixels in a bitmap. While such an image is useful, it has some limits. If the image is magnified enough, its artifacts appear. The halftone dots, film grains and pixels become apparent. Images of sharp edges become fuzzy or jagged. See, for example, pixelation.

Ideally, a vector image does not have the same problem. Edges are represented as a mathematical lines or curves, and they can be magnified thousands of times — until the precision of the numbers becomes an issue.

The task in vectorization is to convert a two-dimensional image into a two-dimensional vector representation of the image. It is not examining the image and attempting to recognize or extract a three-dimensional model; it is not a vision system. For most applications, vectorization does not involve optical character recognition; characters are treated as lines, curves, or filled objects without attaching any significance to them. An advantage is that the shape of the character is preserved, so artistic embellishments remain.

Continuous tone photographs (such as live portraits) are not good candidates for vectorization. Synthetic images such as maps, cartoons, logos, clip art, and technical drawings are candidates for vectorization. Those images could have been originally made as vector images because they are based on geometric shapes or drawn with simple curves.

The input is an image, but that image may be in many forms such as a photograph, a drawing on paper, or one of several raster file formats. Programs that do raster-to-vector conversion may accept bitmap formats such as TIFF, BMP and PNG.

The output is a vector file format. Common vector formats are SVG, DXF, EPS, EMF and AI.

Vectorization is used to update images or recover work. Personal computers often come with a simple paint program that produces a bitmap output file. These programs allow users to make simple illustrations by adding text, drawing outlines, and filling outline with a specific color. Only the results of these operations (the pixels) are saved in the resulting bitmap; the drawing and filling operations are discarded. Vectorization can be used to recapture some of the information that was lost.

Vectorization is also used to recover information that was originally in a vector format but has been lost or has become unavailable. A company may have commissioned a logo from a graphic arts firm. Although the graphics firm used a vector format, the client company may not have a copy of that format. Later, the company may get a vector format by scanning and vectorizing a paper copy of the logo.


Original PNG file (37 kB)
Hand converted to SVG (9 kB)

Vectorization starts with an image.


The image can be vectorized manually. A person could look at the image, make some measurements, and then write the output file by hand. That was the case for the vectorization of a technical illustration about neutrinos. The illustration has a few geometric shapes and a lot of text; it was relatively easy to convert the shapes, and the SVG vector format allows the text (even subscripts and superscripts) to be entered easily.

The original image did not have any curves (except for the text), so the conversion is straightforward. Curves make the conversion more complicated, so computers are often used in the process. Vectorization often needs a computer to manage the vector data.

If the image is not in machine readable form, then it is scanned into a usable file format.

Once there is a machine-readable bitmap, the image can be imported into a graphics editing program (such as Adobe Illustrator, CorelDRAW, or Inkscape). Then a person can manually trace the elements of the image using the program's editing features. Curves in the original image can be approximated with lines, arcs, and Bezier curves. An illustration program allows spline knots to be adjusted for a close fit. Manual vectorization is possible, but it can be tedious.

Although graphics drawing programs have been around for a long time, but artists may find the freehand drawing facilities are awkward even when a drawing tablet is used. Instead of using a program, Pepper (2005) describes making a sketch on paper. Instead of scanning the resulting sketch and tracing it freehand in the computer, Pepper states: "Those proficient with a graphic tablet and stylus could make the following changes directly in CorelDRAW by using a scan of the sketch as an underlay and drawing over it. I prefer to use pen and ink, and a light table"; most of the final image was traced by hand in ink. Later the line-drawing image was scanned at 600 dpi, cleaned up in a paint program, and then automatically traced with a program.[1] Once the black and white image was in the graphics program, some other elements were added and the figure was colored.

Similarly, Ploch (2005) recreated a design from a digital photograph. The JPEG was imported and some "basic shapes" were traced by hand and colored in the graphics drawing program; more complex shapes were handled differently. Ploch used a bitmap editor to remove the background and crop the more complex image components. He then printed the image and traced it by hand onto tracing paper to get a clean black and white line drawing. That drawing was scanned and then vectorized with a program.[2]


There are programs that automate the vectorization process. Example programs are Adobe Streamline (discontinued), Corel's PowerTRACE, and Potrace. Some of these programs have a command line interface while others are interactive that allow the user can adjust the conversion settings and view the result. Adobe Streamline is not only an interactive program, but it also allows a user to manually edit the input bitmap and the output curves. Corel's PowerTRACE is accessed through CorelDRAW; CorelDRAW can be used to modify the input bitmap and edit the output curves. Adobe Illustrator has a facility to trace individual curves.[3]

Automated programs can have mixed results. A program (PowerTRACE) was used to convert a PNG map to SVG. The program did a good job on the map boundaries (the most tedious task in the tracing) and the settings dropped out all the text (small objects). The text was manually re-inserted.

Map in PNG format (13 kB)
Map after automated conversion and touch up to re-add the labels and adjust colors. (Note: Wikipedia's SVG conversion tools currently do not handle a text baseline alignment option, so the text is displaced downward.) (18 kB)

Other conversions may not go as well. The results depend on having high-quality scans, reasonable settings, and good algorithms.

Scanned images often have a lot of noise. The bitmap image may need a lot of work to clean it up. Erase stray marks and fill in lines and areas.

Corel advice. Put image on a light table, cover with vellum, and then manually ink the desired outlines. Then scan the vellum and use automated raster-to-vector conversion program on that scan.


Although these lines may look solid, they are far from perfect. The lines were drawn on vellum with a fountain pen, a 0.7 mm gel pen, and a 0.5 mm HB pencil. The images was scanned at 600 pixels per inch with 24-bit RGB. The line widths end up being 10 to 14 pixels wide. The ink colors are not uniform and have specular reflections that put light pixels within the lines. The pencil lines also have interior defects due to the roughness (tooth) of the paper. The scan also has some unsharp masking artifacts.

There are many different image styles and possibilities, and no single vectorization method works well on all images. Consequently, vectorization programs have many options that influence the result.

One issue is what the predominant shapes are. If the image is of a fill-in form, then it will probably have just vertical and horizontal lines of a constant width. The program's vectorization should take that into account. On the other hand, a CAD drawing may have lines at any angle, there may be curved lines, and there may be several line weights (thick for objects and thin for dimension lines). Instead of (or in addition to) curves, the image may contain outlines filled with the same color. Adobe Streamline allows users to select a combination of line recognition (horizontal and vertical lines), centerline recognition, or outline recognition.[4] Streamline also allows outline shapes that are small to thrown out; the notion is such small shapes are noise.[5] The user may set the noise level between 0 and 1000; an outline that has fewer pixels than that setting is discarded.

Another issue is the number of colors in the image. Even images that were created as black on white drawings may end up with many shades of gray. Some line-drawing routines employ anti-aliasing; a pixel completely covered by the line will be black, but a pixel that is only partially covered will be gray. If the original image is on paper and is scanned, there is a similar result: edge pixels will be gray. Sometimes images are compressed (e.g., JPEG images), and the compression will introduce gray levels.

Many of the vectorization programs will group same-color pixels into lines, curves, or outlined shapes. If each possible color is grouped into its own object, there can be an enormous number of objects. Instead, the user is asked to select a finite number of colors (usually less than 256), the image is reduced to using that many colors (this step is color quantization), and then the vectorization is done on the reduced image.[6] For continuous tone images such as photographs, the result of color quantization is posterization. Gradient fills will also be posterized.[7]

Reducing the number of colors in an image is often aided with a histogram. The most common colors may be selected as the representatives, and other colors are mapped to their closest representative. When the number of colors is set to two, the user may be asked to make threshold and contrast setting.[8] A contrast setting looks for significant changes in pixel color rather than a particular color; consequently, it may ignore the gradual color variations in a gradient fill. Once the outline has been extracted, the user could manually reintroduce the gradient fill.

The vectorization program will want to group a region of the same color into a single object. It can clearly do that by making the region boundary exactly follow the pixel boundaries, but the result will be a boundary of often short orthogonal lines. The resulting conversion will also have the same pixelation problems that a bitmap has when it is magnified. Instead, the vectorization program needs to approximate the region boundary with lines and curves that closely follow the pixel boundaries but are not exactly the pixel boundaries. A tolerance parameter tells the program how closely it should follow the pixel boundaries.[9]

The end result of many vectoriztion programs are curves consisting of cubic Bézier curves. A region boundary is approximated with several curve segments. To keep a curve smooth, the joints of two curves is constrained so the tangents match. One problem is determining where a curve bends so sharply that it should not be smooth.[10] The smooth portions of a curve are then approximated with a Bézier curve fitting procedure. Successive division may be used. Such a fitting procedure tries to fit the curve with a single cubic curve; if the fit is acceptable, then the procedure stops. Otherwise, it selects some advantageous point along the curve and breaks the curve into two parts. It then fits the parts while keeping the joint tangent. If the fit is still unacceptable, then it breaks the curve into more parts.[11]

Some vectorizers are standalone programs, but many have interactive interfaces that allow a user to adjust the program parameters and quickly see the result. PowerTRACE, for example, can display the original image and preview the converted image so the user may compare them; the program also reports information such as the number of curves.[12]


On the right is an illustration showing the operation of the radula in mollusks. The upper portion is mostly a one-pen-width filled outline diagram, but it has a mesh gradient fill along the bottom of the shell and along the bottom of food. It also has some artistic brushes on the upper left of the shell. The bottom portion of the illustration has four line weights and some small characters; the color fill is simple except for a gradient at the jagged lines.

The 531×879 pixel image was traced; 50 colors were used. Most (if not all) lines were lost; they were turned into black regions, and their effective line widths vary. The black outline around the blue food in upper part disappeared. The gradient fills and brushed spots were lost to color quantization/posterization; some brush spots disappeared. Some letters survived the vectorization with distortion, but most letters were discarded. Losing the letters is not a big issue; post conversion editing would want to delete the annotation and replace it with text rather than curves. Thin lines crossing at a shallow angle made filled regions, and intersecting outlines of filled region became confused; see lower right corner. The tracing also has some odd features. Many black outlines touch, so they become a large, complicated, object rather than just outlines for specific regions. Instead of just background, a rectangular white region separates the two outlined rectangles. The objects labeled op, rp, and rr are not simple layered shapes; the desired result would have rr overlaid by rp which is overlaid by op.

Usage domains[edit]

Vectorization is effective on single colored, non gradient input data, like signatures.

Continuous tone images[edit]

Vectorization is usually inappropriate for continuous tone images such as portraits. The result is often poor. For example, many different image tracing algorithms were applied to a 25 kB JPEG image. The resulting vector images are at least a factor of ten larger and may have pronounced posterization effects when a small number of colors are used.

See also[edit]


  1. ^ Pepper 2005, pp. 68–71
  2. ^ Ploch 2005, p. 17
  3. ^ Adobe 1998, pp. 100–101
  4. ^ Adobe 1992, p. 39
  5. ^ Adobe 1992, pp. 40–41
  6. ^ Adobe 1992, p. 53
  7. ^ Adobe (1998, pp. 348–350) discusses color banding in gradient fills.
  8. ^ Adobe 1992, p. 54–55
  9. ^ Adobe 1992, pp. 59–60
  10. ^ Itoh & Ohno 1993
  11. ^ Schneider 1990
  12. ^ Corel 2005, p. 217
  • Adobe (1992), Adobe Streamline User Guide (version 3 for Windows ed.), Mountain View, CA: Adobe Systems 
  • Adobe (August 1998), Adobe Illustrator User Guide (version 8.0 ed.), Mountain View, CA: Adobe Systems, 90012366 
  • Corel (2005), User Guide, CorelDRAW X3 Graphics Suite, Ottawa, ON: Corel Corporation, pp. 213–220 
  • Pepper, K. N. (2005), "Cartooning with CorelDRAW", in Corel, CorelDRAW Handbook: Insights from the Experts, CorelDRAW X3 Graphics Suite, Corel Corporation, pp. 64–77 
  • Ploch, Michael (2005), "Re-creating vintage designs on t-shirts", in Corel, CorelDRAW Handbook: Insights from the Experts, CorelDRAW X3 Graphics Suite, Corel Corporation, pp. 12–23 
  • Schneider, Philip J. (1990), "An Algorithm for Automatically Fitting Digitized Curves", in Glassner, Andrew S., Graphics Gems, Boston, MA: Academic Press, pp. 612–626, ISBN 0-12-059756-X 

Further reading[edit]

  • Avrahami, Gideon; Pratt, Vaughan, "Sub-pixel Edge Detection in Character Digitization", in Morris, R.; André, J., Raster Imaging and Digital Typography II, Cambridge University Press, pp. 54–64 
  • Itoh, Koichi; Ohno, Yoshio (September 1993), "A curve fitting algorithm for character fonts", Electronic Publishing (John Wiley) 6 (3): 195–205 

External links[edit]