This new progressive web app can turn images into SVG vector graphics


There are two different categories of images that you typically see on the web. Raster images (like JPG, PNG, WebP, etc.) are a series of pixels at a fixed resolution, while vector images (like SVG) use various lines and shapes. Vector graphics are popular for logos and other simple images because they don’t look great in high resolution (or when zoomed in), but they can be a lot of work to create from scratch. There is now a handy web application for creating SVGs from standard images: SVGcode.

SVGcode is a new progressive web application created by Thomas Steiner, a Developer Relations Engineer working at Google (although SVGcode itself is not a Google product). Once you open it in your browser at, you can open an image from your PC and it will automatically be “drawn” in SVG format. Most images will need some tweaking to create a decent looking SVG, but this is an impressive web app and could come in handy if you want to create a cleaner vector version of a raster logo.

XDA logo in SVGCode

SVGcode is powered by some of the latest APIs added by web browsers such as Chromium and Firefox. The basic drawing functionality is based on the Potrace Project, which has been converted to web assembly code for this web application. SVGCode can copy the finished file to your clipboard (with the Asynchronous Clipboard API), appear as an option in your PC’s file manager when you right-click an image (with the file management API) and open / save the files on your device (using the File System Access API). He even uses the new Window control overlay API to hide the system title bar when installed, making it look a bit more like a native app.

You can read more about the SVGcode development process in a blog post on Google’s web development blog. Since this is a PWA, you can use and install SVGcode on anything with a modern web browser.


Comments are closed.