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?
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.
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.
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.
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.
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.