How to convert PNG to SVG image files - Tutorial

Updated: November 17, 2018

The world of pixels comes in two big forms - raster graphics and vector graphics. Plainly speaking, rasters or bitmaps are your ordinary photos - a grid of X-Y information, where each dot (pixel) represents a three-color value. Vector graphics do things differently - they use mathematical functions to represent graphical information. This is like true-type fonts versus ... eh ... not so true-type ones.

Why is this important? Well, when you resize (scale up) bitmaps, you lose information. When you do so with scalable vector graphics, you don't, which is why vector graphics images always look nice and smooth, regardless of their size. OK, so you may want to have a logo or such, and you have it in JPEG or PNG format. Now, you want to convert it to SVG. You realize that this is not quite so trivial. Free image manipulation programs like Krita and GIMP cannot do this. What now?

Teaser

The name of the game: Inkscape

Nice, even the number of syllables matches. To be able to convert bitmaps to vector graphics, we need a program that can do this. Inkscape is a indeed a free, open-source vector graphics editor, and it will do as we desire. The workflow is a tad convoluted, hence this guide.

Launch Inkscape, open a file. Well, you have two options here. You can open a file or import it. The first option is preferable, because it will scale the work canvas to image size. The later is useful if you want to work with multiple layers and use multiple images to create your project. With standalone files, the plain open does the job.

Open file

Now, click Path > Trace Bitmap. In order to convert the file, Inkscape needs to "map" all the different lines that form the image so it can trace them - and convert into mathematical functions. There are quite a few options here. You can live preview the results - that's always good. Then, you should probably run multiple scans, as this increases the accuracy of the tracing (not unlike my 3D rendering stuff in a way). I noticed that going up from 2 scans to about 6-8 gives huge improvements, but then it tapers off. The max. number of scans is 256. Then, you can also stack scans, remove background and more. You can also do color/grayscale tracing.

Preview

Trace options

Results

Your mileage will invariably vary. The quality of the source, the size, the complexity of graphics and how much computational energy you invest into the conversion will dictate the output. Inkscape - and for that matter, any vector graphics editor, like say Karbon - works best with shapes that have an easy approximation to known mathematical shapes and curves, like squares, circles, etc. Free-form images are trickier.

I tested with my would-be Dedoimedo logo, and the results were mixed, from odd to fairly good. You do get more or less the original image, but some detail is lost, and it can look a bit fuzzy. Not bad, given that you can now scale it infinitely, but still. If you go with simpler logos, 'tis a no-brainer. Works like a charm.

Converted, 8 scans

Side by side, comparison

Import

When you import images, there are some subtle differences from what we did earlier. Mostly, in how you want to import your file. You have the option to tweak DPI or play with the rendering mode. Overall, in most cases, auto works just fine.

Import options

Conclusion

Well, that's about it. Inkscape is a very useful program when it comes to PNG > SVG conversions, or well, just about any bitmap format. You do have quite a bit of leeway with the final output, and you can use multiple scans to create the output. Simpler, more geometric images will work better, of course.

My testing shows that a relatively small number of scans gives the most optimal (if not ideal) overall results, and also helps keep the file size down to reasonable figures. Be aware that big images may result in really big SVG conversions. But that would be all. Hopefully, 'twas useful. Not much else to say, except happy experimenting!

Cheers.

You may also like: