How to implement conversion from raster to black and white vector on the site

All graphic files are divided into two global types - raster and vector. Sometimes you need to do a conversion from a raster to a black and white vector. For example, for tracing black-and-white icons, QR-codes, barcodes, images with raster inscriptions, checks or pictures in a blog .

What is the difference between a raster file and a vector file?

Raster graphics

A raster file represents a sequence of colored squares (pixels). The number of points in the file is determined by its horizontal and vertical dimensions. For example, a file of 640x480 in size contains 307,200 points. The raster file can be represented as a mosaic. You can not stretch the raster image without losing quality.
')
Popular raster formats: JPEG , GIF , PNG , TIFF, WEBP , BPG .

Vector graphics

Vector graphics represent a variety of different geometric shapes described by mathematical formulas. The overlay of these figures on each other forms an image. For example, an ordinary square is described by four equal segments, each of which is connected by its ends with the ends of the other two at an angle of 90 degrees.

Popular vector formats: SVG , EPS, WMF, PDF .

From raster to vector

Vectorization algorithm

Tracing occurs in several stages:

• The vectorizer scans the image and finds all areas with pixels painted in the same color.
• Borders are approximated by segments with a thickness of 1 px.
• Constructed triangulation with restriction along the lines.

Potrace based converter

Sometimes you need to automatically convert images that users download from raster to vector format.

There is a very simple and free way to implement such conversion using Inkscape vector editor. Inkscape uses Potrace to vectorize images.

After tracing a picture can only be black and white. The official site potrace says that it is possible in the future to support color will be implemented.

An example of converting from PNG to SVG. At the input, the potrace function accepts only files with the PNM extension, so before PNG tracing you need to convert:

exec('convert image.png image.pnm'); exec('potrace image.pnm -s -o image.svg'); 

This method is implemented here and you can look at the quality of tracing of any image. An example of a blurred bar code vectoring. And this is an example of a traced logo . This is how the converter handles photos .

How to make the output color image

In addition to manual editing, there is another option for painting a black and white picture on the output. But the picture should be a little color. The solution is suitable for tracing color icons, logos and buttons in the vector.

You can select individual colors using the ppmcolormask mask (included in the Netpbm package):

 cat img.gif | giftopnm | ppmcolormask #641b1b | potrace 

Then trace each part separately and lay them on top of each other at the exit.

From vector to raster

Rasterize vector drawing is much easier. A grid with cells of a certain size is superimposed on the vector image and the image is sampled, and then encoded according to the output format.



One example of converting SVG to PNG using Imagick.

With this code you can convert SVG files to PNG24:

 $svg = file_get_contents('image.svg'); $image = new Imagick(); $image->setBackgroundColor(new ImagickPixel('transparent')); $image->readImageBlob($svg); $image->setImageFormat('png24'); $image->writeImage('image.png'); $image->clear(); $image->destroy(); 

Here you can see the results of converting your pictures from SVG to PNG.

Abstract

1. You can convert from raster to vector on your site using potrace.
2. Potrace supports only black and white vectorization.
3. Convert from vector to raster using Imagick.