How to use SVG Tracing Tool for vector graphics

Converting a Raster to a Vector.

When developing a Website according to a specific design we often have problems with the format of the source images. I’m referring to infographic icons or images, but it doesn’t apply to photos (as photo can also be presented in the vector format). In this article we will talk about images which can be converted or traced to a vector format.

While reviewing the site design before starting development , I define graphic elements which can be used in the vector format. In the future it will simplify the development process. Often designers don’t care about the vector source images and include it in the raster PNG or JPG format.

Logos, maps, schemes, simple drawings without gradients can all be vectorized.

Trace steps:

Processing the image with a filter

It will help us delete noises in multiple small areas that obstruct tracing. At this stage it is very helpful to use Photoshop Cutout Filter. This filter reduces the quantity of colors and separates the outlines of images. Let’s look at the following example, showing usthe first image that we need to trace.

SVG Tracig Tool

As you can see we have a gradient around the logo. Let’s try to avoid it with the help of the Photoshop Cutout Filter. First, we open the image in Photoshop, select an area, and then go to Filter => Filter gallery and in the category under Artistic we choose the Cutout Filter.

SVG Tracig Tool

By changing the filter option you will the remove background gradient (pay attention to other elements of the image, it should be closest to original). After using a filter our image will look like this:

SVG Tracig Tool

Now we can remove the background from image and save it in the PNG format. Removing the background isn’t necessary but often it can help us save the precision of the SVG image.

Let’s import an image to Adobe Illustrator and choose Window > Image Trace. There we’ll be able to see all of our trace options. Let’s dive more into the details.

Trace Options:

SVG Tracig Tool

Preset – The most popular trace options which are useful to convert simple images.

View – Set the kind of tracing object. Trace object is composed of two components: initial and result image (result is a vector image). You can set the view type of the result image as a single traced image, outline image, outline with source or just source image. It is helpful when you tune trace options.

SVG Tracig Tool

Mode – Set the color mode for the result image.

SVG Tracig Tool

Palette – Set the list of the colors which will be used in tracing. You can choose samples from existing documents (option available i color mode). To allow the illustrator to set the tracing color – choose Automatic. If you want to use colors as a palette for tracing from the document – choose Document Library.

SVG Tracig Tool

Colors – Set the quantity of colors which will be used in the image. When the Palette Library is switched on, you can choose the sample of colors (option available in Color Mode).

Grayscale – Set the quantity of shadows of gray which will be used while tracing the image into the gray color (option available in Grayscale Mode).

Threshold – Responses for the formation of black and white images. The option simplifies the image by transforming all light gray pixels to white and all dark pixels to black ( option available in Black and White Mode).

Paths – Set the precision of tracing. Lower value allows the creation of a more accurate path and with a higher value you will get an approximate path.

Corners – Set the sharpness of corners. Higher value leads to a large number of corners.

Noize – Set the area in pixels which will be ignored while Tracing. The higher value allows you to decrease the quantity of false vector elements.

Method – Set the type of filling of areas.

Stroke – Create the circuit with the outline in the result image.

Outline – Set the maximum border width of the elements in the initial image which could be converted to an outline. Elements which exceed the border width will be transformed to a path.

Snap Curves to Lines – Replace slightly curved lines with straight lines.

Ignore White Color – Replace all white areas with blank areas.

In our case it may look like this:

Preset: Custom

View: Tracing image with Outlines

Mode: Color

Palette: Automatic

Colors: 13 (we can set the number of colors or take them from the palette)
In our case, the advanced option is unnecessary.

As a result we have a vector image of a logo which we can use in our site without losing quality.

SVG Tracig Tool

Let’s look at reference points (curve peaks):

SVG Tracig Tool

We should check the image for extra points on the straight lines. By looking at the image we can see 9 extra points which must be removed. It is unnecessary to have intermediate points on straight lines. Just delete them using the Curvature Tool.

SVG Tracig Tool

After saving the image in SVG it will take 7Kb of disk space.

Helpful Tips

  1. Retrace image
    If for some reasons the result image is not suitable, correct the Tracing options at any time by opening Object > Tracing > Tracing options . After the correction of options click the Trace button.
  2. Tuning colors using in-image tracing.
    • Create Color Library from image colors
    • Open Color Library, then open Trace options
    • In the palette menu choose the name of the library
  3. Manual tracing of the graphic object using the template layouts.
    Template layouts are fixed, unprintable layouts which are used for manually tracing images. Usually template layouts are shaded 50% to see all the outlines better.

Using the Adobe Illustration Tracing Tool will help you to get great results with vector graphics and save time when there is no vector source image.


Please turn your device