SVGcode: a PWA to convert raster images to SVG vector graphics
SVGcode is a Progressive Web App that lets you convert raster images like JPG, PNG, GIF, WebP, AVIF, etc. to vector graphics in SVG format. It uses the File System Access API, the Async Clipboard API, the File Handling API, and Window Controls Overlay customization.
From raster to vector #
Have you ever scaled an image and the result was pixelated and unsatisfactory? If so, you have probably dealt with a raster image format such as WebP, PNG, or JPG.
In contrast, vector graphics are images that are defined by points in a coordinate system. These points are connected by lines and curves to form polygons and other shapes. Vector graphics have an advantage over raster graphics in that they may be scaled up or down to any resolution without pixelation.
Introducing SVGcode #
I have built a PWA called SVGcode that can help you convert raster images to vectors. 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.
Using SVGcode #
First, I want to show you how to use the app. I start with the teaser image for Chrome Dev Summit that I downloaded from the ChromiumDev Twitter channel. This is a PNG raster image that I then drag onto the SVGcode app. When I drop the file, the app traces the image color by color, until a vectorized version of the input appears. I can now zoom into the image, and as you can see, the edges stay sharp. But zooming in on the Chrome logo, you can see that the tracing wasn't perfect, and especially the outlines of the logo look a bit speckled. I can improve the result by de-speckling the tracing by suppressing speckles of up to, say, five pixels.
Posterization in SVGcode #
An important step for vectorization, especially for photographic images, is posterizing the input image to reduce the number of colors. SVGcode allows me to do this per color channel, and see the resulting SVG as I make changes. When I'm happy with the result, I can save the SVG to my hard disk and use it wherever I like.
APIs used in SVGcode #
Now that you have seen what the app is capable of, let me show you some of the APIs that help make the magic happen.
Progressive Web App #
SVGcode is an installable Progressive Web App and therefore fully offline enabled. The app is based on the Vanilla JS template for Vite.js and uses the popular Vite plugin PWA, which creates a service worker that uses Workbox.js under the hood. Workbox is a set of libraries that can power a production-ready service worker for Progressive Web Apps, This pattern may not necessarily work for all apps, but for SVGcode's use case it's great.
Window Controls Overlay #
To maximize the available screen real estate, SVGcode uses Window Controls Overlay customization by moving its main menu up into the titlebar area. You can see this get activated at the end of the install flow.
File System Access API #
To open input image files and save the resulting SVGs, I use the File System Access API. This allows me to keep a reference to previously opened files and to continue where I left off, even after an app reload. Whenever an image gets saved, it is optimized via the svgo library, which may take a moment, depending on the complexity of the SVG. Showing the file save dialog requires a user gesture. It is therefore important to obtain the file handle before the SVG optimization happens, so the user gesture is not invalidated by the time the optimized SVG is ready.
try {
let svg = svgOutput.innerHTML;
let handle = null;
// To not consume the user gesture obtain the handle before preparing the
// blob, which may take longer.
if (supported) {
handle = await showSaveFilePicker({
types: [{description: 'SVG file', accept: {'image/svg+xml': ['.svg']}}],
});
}
showToast(i18n.t('optimizingSVG'), Infinity);
svg = await optimizeSVG(svg);
showToast(i18n.t('savedSVG'));
const blob = new Blob([svg], {type: 'image/svg+xml'});
await fileSave(blob, {description: 'SVG file'}, handle);
} catch (err) {
console.error(err.name, err.message);
showToast(err.message);
}Drag an drop #
For opening an input image, I can either use the file open feature, or, as you have seen above, just drag and drop an image file onto the app. The file open feature is pretty straightforward, more interesting is the drag and drop case. What's particularly nice about this is that you can get a file system handle from the data transfer item via the getAsFileSystemHandle() method. As mentioned before, I can persist this handle, so it's ready when the app gets reloaded.
document.addEventListener('drop', async (event) => {
event.preventDefault();
dropContainer.classList.remove('dropenter');
const item = event.dataTransfer.items[0];
if (item.kind === 'file') {
inputImage.addEventListener(
'load',
() => {
URL.revokeObjectURL(blobURL);
},
{once: true},
);
const handle = await item.getAsFileSystemHandle();
if (handle.kind !== 'file') {
return;
}
const file = await handle.getFile();
const blobURL = URL.createObjectURL(file);
inputImage.src = blobURL;
await set(FILE_HANDLE, handle);
}
});For more details, check out the article on the File System Access API and, if you're interested, study the SVGcode source code in src/js/filesystem.js.
Async Clipboard API #
SVGcode is also fully integrated with the operating system's clipboard via the Async Clipboard API. You can paste images from the operating system's file explorer into the app either by clicking the paste image button or by pressing command or control plus v on your keyboard.
The Async Clipboard API has recently gained the ability to deal with SVG images as well, so you can also copy an SVG image and paste it into another application for further processing.
copyButton.addEventListener('click', async () => {
let svg = svgOutput.innerHTML;
showToast(i18n.t('optimizingSVG'), Infinity);
svg = await optimizeSVG(svg);
const textBlob = new Blob([svg], {type: 'text/plain'});
const svgBlob = new Blob([svg], {type: 'image/svg+xml'});
navigator.clipboard.write([
new ClipboardItem({
[svgBlob.type]: svgBlob,
[textBlob.type]: textBlob,
}),
]);
showToast(i18n.t('copiedSVG'));
});To learn more, read the Async Clipboard article, or see the file src/js/clipboard.js.
File Handling #
One of my favorite features of SVGcode is how well it blends in with the operating system. As an installed PWA, it can become a file handler, or even the default file handler, for image files. This means that when I'm in the Finder on my macOS machine, I can right-click an image and open it with SVGcode. This feature is called File Handling and works based on the file_handlers property in the Web App Manifest and the launch queue, which allows the app to consume the passed file.
window.launchQueue.setConsumer(async (launchParams) => {
if (!launchParams.files.length) {
return;
}
for (const handle of launchParams.files) {
const file = await handle.getFile();
if (file.type.startsWith('image/')) {
const blobURL = URL.createObjectURL(file);
inputImage.addEventListener(
'load',
() => {
URL.revokeObjectURL(blobURL);
},
{once: true},
);
inputImage.src = blobURL;
await set(FILE_HANDLE, handle);
return;
}
}
});For more information, see Let installed web applications be file handlers, and view the source code in src/js/filehandling.js.
Conclusion #
Alright, this was a quick tour through some of the advanced app features in SVGcode. I hope this app can become an essential tool for your image processing needs alongside other amazing apps like Squoosh or SVGOMG.
SVGcode is available at svgco.de. See what I did there? You can review its source code on GitHub. Note that since Potrace is GPL-licensed, so is SVGcode. And with that, happy vectorizing! I hope SVGcode will be useful, and some of its features can inspire your next app.
Acknowledgements #
This article was reviewed by Joe Medley.