Image Vectorization Using C# – Convert raster image to vector graphic

Aspose.SVG offers a Free Online Image Vectorizer that is browser-based and works on any platform. Using this App, you may apply a set of options for obtaining the perfect result. Save your time and check this free Image Vectorizer to get all the benefits of vector graphics!

How to Convert Raster Image to Vector Graphic

There are two types of images: vector and bitmap. Which type you use will depend on the situation. A bitmap is a two-dimensional array that maps colors to pixels at a particular location. A raster image is a much larger file than a vector one. Raster formats are suitable for photographs or pictures with color gradients. However, one of their main disadvantages is the loss of quality when scaling. Vector graphics allow you to scale images without losing quality and can sometimes significantly reduce their size. The best suited for the vector format are logos, icons, page layouts, maps, graphs, line arts, and illustrations. Image Vectorization is the process of converting a raster image to vector graphics – the Bezier curves, splines and lines.

This article considers a few C# examples that demonstrate the ImageVectorization functionalities and the effect of configuration properties, such as TraceSimplifier, TraceSmoother, and PathBuilder, on the vectorization result.

For the ColorLimit property, 25 colors are available. You can choose the required number of colors depending on the situation. The default value is 25. The ImageSizeLimit property sets the maximal dimension of an image determined by the multiplication of image width and height. The size of the image will be scaled based on this property. The default value is 1800000.

Note: Aspose.Svg.ImageVectorization Namespace aims to implement image vectorization tasks for source bitmaps such as JPG, PNG, BMP, TIFF, GIF, etc. The output image is in vector SVG file format.

Example 1. Use of the TraceSimplifier property

The ImageVectorization Namespace includes a set of classes and interfaces that allows implementation of the image vectorization process. The provided classes and methods enable you to work with various options for preprocessing images before saving them to vector format. The processing assumes control of the following vectorization options: TraceSimplifier, TraceSmoother, ColorLimit and LineWidth.

Let’s look at how the TraceSimplifier property affects image vectorization. First of all, need to know that:

• the ImageTraceSimplifier(tolerance) constructor takes as a parameter the tolerance and initializes an instance of the ImageTraceSimplifier class.
• the tolerance value determines the maximum error tolerance allowed for a point to be eliminated from the trace. It must be in the range of 0 to 4. The default value is 0.3.
• the ImageTraceSimplifier class is responsible for reducing the number of points in a curve that is approximated by a series of trace points.

The following code snippet demonstrates the use of different values of the TraceSimplifier property for image to vector conversion.

using System.IO;
using Aspose.Svg.ImageVectorization;
using Aspose.Svg.Saving;

// Compare different SplinePathBuilder configurations for image vectorization with varying simplification levels

// Initialize an instance of the ImageVectorizer class and specify configuration properties
ImageVectorizer vectorizer1 = new ImageVectorizer
{
    Configuration =
    {
        PathBuilder = new SplinePathBuilder
        {
            TraceSimplifier = new ImageTraceSimplifier(0.1f),
            TraceSmoother =   new ImageTraceSmoother(2),
        },
        ColorsLimit = 2
    }
};

ImageVectorizer vectorizer2 = new ImageVectorizer
{
    Configuration =
    {
        PathBuilder = new SplinePathBuilder
        {
            TraceSimplifier = new ImageTraceSimplifier(1),
            TraceSmoother =   new ImageTraceSmoother(2),
        },
        ColorsLimit = 2
    }
};

ImageVectorizer vectorizer3 = new ImageVectorizer
{
    Configuration =
    {
        PathBuilder = new SplinePathBuilder
        {
            TraceSimplifier = new ImageTraceSimplifier(2),
            TraceSmoother =   new ImageTraceSmoother(2),
        },
        ColorsLimit = 2
    }
};

// Prepare a path for a source image file
string sourcePath = Path.Combine(DataDir, "formats.png");

// Vectorize raster image from the specified file
using SVGDocument document1 = vectorizer1.Vectorize(sourcePath);
using SVGDocument document2 = vectorizer2.Vectorize(sourcePath);
using SVGDocument document3 = vectorizer3.Vectorize(sourcePath);

// Save the vectorized image as an SVG file
document1.Save(Path.Combine(OutputDir, "formats1.svg"));
document2.Save(Path.Combine(OutputDir, "formats2.svg"));
document3.Save(Path.Combine(OutputDir, "formats3.svg"));

Example 2. Use of the TraceSmoother property

Sometimes fragments of contours look like sawtooth waves. Let’s look at how the TraceSmoother property affects contours’ smoothing. Before you start, know that:

• the ImageTraceSmoother class is responsible for smoothing the number of points in a curve that is approximated by a series of trace points. This class implements the Nearest Neighbor approach;
• the ImageTraceSmoother(severity) constructor takes as a parameter the severity and initializes an instance of the ImageTraceSmoother class;
• the value of the severity determines the extent of the region considered by query point. It must be in the range of 0 to 20.

Let’s look at how the TraceSmoother property affects image vectorization:

using System.IO;
using Aspose.Svg.ImageVectorization;
using Aspose.Svg.Saving;

// Vectorize PNG to SVG using ImageVectorizer and custom parameters

// Initialize an instance of the ImageVectorizer class
ImageVectorizer vectorizer = new ImageVectorizer
{
    // Optionally set a configuration
    Configuration =
    {
        // Optionally create an instance of the PathBuilder class
        PathBuilder = new BezierPathBuilder {
        // Optionally set trace smoother
        TraceSmoother = new ImageTraceSmoother(0),
            ErrorThreshold =  30,
            MaxIterations = 30
        },
        ColorsLimit = 10,
        LineWidth = 1
    }
};
// Vectorize image from the specified file
using SVGDocument document = vectorizer.Vectorize(Path.Combine(DataDir, "flower.png"));

// Save vectorized Image as an SVG file 
document.Save(Path.Combine(OutputDir, "flower.svg"));

Example 3. Photo Vectorization

Is it possible to convert a photo in vector format to look identical to the photo?

SVG is not well suited for drawing photorealistic images. Vector pictures do not allow for natural color transitions yet. Vector graphics are the best for creating logos, illustrations, technical drawings. It is not the most suitable format for continuous-tone images with blends of color or to edit photographs. However, vectorizing photos can result in impressive artistic effects that can be interesting and useful.

In this section, we convert a photo to vector format and try to choose vectorization options so that the result looks identical to the photo:

using System.IO;
using Aspose.Svg.ImageVectorization;
using Aspose.Svg.Saving;

    // Convert JPG to SVG in C#

    // Initialize an instance of the ImageVectorizer class
    ImageVectorizer vectorizer = new ImageVectorizer
    {
        // Optionally set a configuration
        Configuration =
{
    // Optionally create an instance of the PathBuilder class
    PathBuilder = new SplinePathBuilder
    {
        TraceSmoother = new ImageTraceSmoother(1),
        TraceSimplifier = new ImageTraceSimplifier(0.3f),
    },
    ColorsLimit = 25,
    LineWidth = 1
}
    };
    // Vectorize image from a specified file
    using SVGDocument document = vectorizer.Vectorize(Path.Combine(DataDir, "horses.jpg"));

    // Save the vectorized image as SVG
    document.Save(Path.Combine(OutputDir, "horses-new.svg"));

The figure demonstrates the source photo (a), the vectorized image using the code snippet (b) and the manually improved vectorized image (c).

As mentioned above, SVG is not the most suitable format for continuous-tone images with blends of color, etc. The vectorization process uses color image quantization. All small same colored spots or pixels, we replace by geometric shapes or curves. As a result, the borders of such graphic elements do not fit snugly together; gaps appear between them. This is the reason for the form of white spots and dots in the vectorized image.

To fix this problem, you can manually edit the resulting SVG file. We suggest changing the stroke-width="100" value to "150" or another, as you like. Try to get the best result!

The source photo (a) and resulting SVG file (c) you may find and view in details by following the links – horses.jpg, horses.svg.

License Limitations

A free evaluation version of Aspose.SVG for .NET provides all the features for image vectorization except the following:

• Only 4 dominant color will be used to quantize an image.
• Only 50% of SVG Document’s nodes will be saved during serialization.

If you want to try Aspose.SVG for .NET without evaluation limitations request a 30-day temporary license. For more information, please refer to How to get a Temporary License?.

The figure shows the result of the photo to vector conversion without applying a license.

The resulting SVG file you may find and view in details by following the links – horses-license.svg.

You can download the complete C# examples and data files from GitHub. About downloading from GitHub and running examples, you find out from the How to Run the Examples section.