@eprev
My name’s Anton Eprev and I’m a web developer working as front-end engineer at Booking.com in Amsterdam, Netherlands. I’m on Twitter, GitHub and Unsplash.

Converting PNG to SVG

Let’s say, you’ve found a funny black-and-white picture on the Internet and you want it badly in hi-res or vector which is even better. Well, there is a command-line tool called Potrace.

Installation

It has precompiled distributions for OS X, Linux and Windows. Potrace is also available in major package managers, including Homebrew:

$ brew install potrace

The manual installation is super easy though. For OS X do the following:

$ cd potrace-1.12.mac-i386
$ sudo cp mkbitmap.1 potrace.1 /usr/share/man/
$ sudo cp mkbitmap potrace /usr/local/bin

Usage

Potrace works with bitmaps (PBM, PGM, PPM, or BMP format). It means you have to convert the image you have to one of those formats. We will be using ImageMagick’s convert program. If you don’t have it installed, you can use Homebrew to get it:

$ brew install imagemagick

Alright. Let’s say you’ve got this image (by Nation of Amanda) in PNG format with transparency:

‘Nap all day, sleep all night, party never’ by Nation of Amanda
Original black-and-white PNG image.

All you need to do is to run this:

$ convert -alpha remove party-never.png pgm: \
| mkbitmap -f 32 -t 0.4 - -o - \
| potrace --svg -o party-never.svg

It converts PNG file to PGM format, removes image transparency, outputs the result image to the standard input of mkbitmap that transforms the input with highpass filtering and thresholding into a suitable for the potrace program format, that finally generates SVG file. You can play around with highpass filtering (-f) and thresholding (-t) values until you have the final look that you want.

As a result you might have now:

‘Nap all day, sleep all night, party never’ by Nation of Amanda
Generated SVG image (zoom the page in).

That’s it.

Want to leave a comment on this? Visit the post’s issue page on GitHub.
Home