Image Vectorization – C# Examples

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!

Text “Banner Image Vectorizer”

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 following code snippet demonstrates the use of different values of the TraceSimplifier property for image to vector conversion.

 1using System.IO;
 2using Aspose.Svg.ImageVectorization;
 3using Aspose.Svg.Saving;
 4...
 5    // Initialize an instance of the ImageVectorizer class and specify configuration properties
 6    var vectorizer1 = new ImageVectorizer
 7    {
 8        Configuration =
 9        {
10            PathBuilder = new SplinePathBuilder
11            {
12                TraceSimplifier = new ImageTraceSimplifier(0.1f),
13                TraceSmoother = new ImageTraceSmoother(2),
14            },
15            ColorsLimit = 2
16        }
17    };
18
19    var vectorizer2 = new ImageVectorizer
20    {
21        Configuration =
22        {
23            PathBuilder = new SplinePathBuilder
24            {
25                TraceSimplifier = new ImageTraceSimplifier(1),
26                TraceSmoother = new ImageTraceSmoother(2),
27            },
28            ColorsLimit = 2
29        }
30    };
31
32    var vectorizer3 = new ImageVectorizer
33    {
34        Configuration =
35        {
36            PathBuilder = new SplinePathBuilder
37            {
38                TraceSimplifier = new ImageTraceSimplifier(2),
39                TraceSmoother = new ImageTraceSmoother(2),
40            },
41            ColorsLimit = 2
42        }
43    };
44
45    // Prepare path for source image file
46    string sourcePath = Path.Combine(DataDir, "formats.png");
47
48    // Vectorize raster image from the specified file
49    using var document1 = vectorizer1.Vectorize(sourcePath);
50    using var document2 = vectorizer2.Vectorize(sourcePath);
51    using var document3 = vectorizer3.Vectorize(sourcePath);
52
53    // Save the vectorized image as an SVG file
54    document1.Save(Path.Combine(OutputDir, "formats1.svg"));
55    document2.Save(Path.Combine(OutputDir, "formats2.svg"));
56    document3.Save(Path.Combine(OutputDir, "formats3.svg"));

Text “Vectorized images with different values of the TraceSimplifier property”

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.

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:

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

 1using System.IO;
 2using Aspose.Svg.ImageVectorization;
 3using Aspose.Svg.Saving;
 4...
 5
 6    // Initialize an instance of the ImageVectorizer class
 7    var vectorizer = new ImageVectorizer
 8    {
 9        // Optionally set configuration
10        Configuration =
11        {
12            // Optionally set path builder
13            PathBuilder = new BezierPathBuilder {
14
15            // Optionally set trace smoother
16            TraceSmoother = new ImageTraceSmoother(0),
17            },
18            ColorsLimit = 10,
19            LineWidth = 1
20        }
21    };
22    // Vectorize image from the specified file
23    using var document = vectorizer.Vectorize(Path.Combine(DataDir, "flower.png"));
24
25    // Save the vectorized image as an SVG file
26    document.Save(Path.Combine(OutputDir, "flower.svg"));

Text “Vectorized images with different values of the TraceSmoother property”

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:

 1using System.IO;
 2using Aspose.Svg.ImageVectorization;
 3using Aspose.Svg.Saving;
 4...
 5
 6    // Initialize an instance of the ImageVectorizer class
 7    var vectorizer = new ImageVectorizer
 8    {
 9        // Optionally set configuration
10        Configuration =
11        {
12            // Optionally set path builder
13            PathBuilder = new SplinePathBuilder
14            {
15                TraceSmoother = new ImageTraceSmoother(1),
16                TraceSimplifier = new ImageTraceSimplifier(0.3f),
17            },
18            ColorsLimit = 25,
19            LineWidth = 1
20        }
21    };
22    // Vectorize image from the specified file
23    using var document = vectorizer.Vectorize(Path.Combine(DataDir, "horses.jpg"));
24
25    // Save the vectorized image in SVG format
26    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).

Text “Source photo and Vectorized photo”

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!

Text “The fragment of SVG file”

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:

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.

Text “Photo vectorization result without using 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.

Subscribe to Aspose Product Updates

Get monthly newsletters & offers directly delivered to your mailbox.