Turning Bitmaps Into Vectors With a Free Web App

If you've ever needed a vector version of a raster image — a JPG, PNG, or GIF — you know the usual route involves design software with a tracing feature. Adobe Illustrator has offered some form of this since its “Live Trace” feature arrived in CS2 back in 2005, later renamed Image Trace. It's a powerful capability, but it's locked inside a paid product.

There's now a free, dedicated web app that does the same job: SVGcode, built by Thomas Steiner. It converts raster images into SVG vector graphics entirely in the browser.

A Modern Take on an Old Technique

What makes SVGcode interesting is its technical foundation. As Steiner explains:

It uses the File System Access API, the Async Clipboard API, the File Handling API, and Window Controls Overlay customization. […]

Credit where credit is due: I didn't invent this. With SVGcode, I just stand on the shoulders of a command line tool called Potrace by Peter Selinger that I have converted to Web Assembly, so it can be used in a Web app.

It's a single-purpose progressive web app that taps into several modern browser APIs to read image files, access the clipboard, and handle files opened with it from the OS. The actual tracing work is done by Potrace, a long-standing command-line utility, compiled to WebAssembly so it runs client-side.

Steiner has documented the project in two posts: a release announcement and a detailed write-up on web.dev.

The Broader Context

Steiner also discussed SVGcode and the wider landscape of capable web apps on ShopTalk episode #497, a conversation framed as a follow-up to the question of why a business would push a native app over a website. The existence of apps like SVGcode is a practical answer: a growing set of browser capabilities now supports real, useful tools that don't require installation from an app store.