 Have you ever scaled up or down an image and the result was pixelated and not very satisfactory? If so, you've probably dealt with a raster image format such as WebP, PNG or JPEG. In contrast, VectroGraphics are images that are defined by points and a coordinate system. These points are connected by lines and curves to form polygons and other shapes. VectroGraphics have the unique advantage over RasterGraphics in that they may be scaled up or down to any resolution without getting pixelated. My name is Tom. I'm a developer relations engineer at Google and I've 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 stand on the shoulders of a command line tool called PoTrace, by Peter Selinger, that I've converted to WebAssembly so it can be used in a web app. First, I want to show you how to use the app. I start with the teaser image from Chrome Dev Summit that I've downloaded from the Chromium Dev Twitter channel. This is a PNG raster image that I then drag onto the SVGCode app. When I drop the file, the app starts tracing 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. With 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 despecling the tracing by suppressing speckles of up to maybe, say, 5 pixels. 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. Now that you've seen what the app is capable of, let me show you some of the APIs that help make the magic happen. SVGCode is an installable, progressive web app and therefore fully offline enabled. The app is based on Vanilla beat.js and uses the popular beat plugin PWA, which creates a service worker that uses Workbox.js on 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. To open input image files and save the resulting SVG, I use the file system access API. This allows me to keep a reference to previously opened files around and continue where I left off, even after an app reload. Whenever an image gets saved, it is optimized where the SVG go 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. For opening an input image, I can either use the file open feature or, as you've seen in the beginning, just drag and drop an image file onto the app. The file open feature is pretty straightforward, more interesting as the drag and drop case. What's particularly nice about this is the fact that you can get a file system handle from the data transfer item via the get as file system handle method. As mentioned before, I can persist this handle, so it's ready when the app gets reloaded. For more details, check out the web.dev article on the file system access API, and if you're interested, study the SVG code sources in source slash js slash file system dot js. SVG code is also fully integrated with the operating systems clipboard via the async clipboard API. You can paste images from the operating systems 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 recently has 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. To learn more, read the async clipboard article on web.dev or see the file source slash js slash clipboard dot js. One of my favorite features of SVG code 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 SVG code. This feature is called file handling and works based on the file handler's property and the web app manifest and the launch queue, which allows the app to consume the past file. Read up all the details on file handling in the web.dev article and view the source code in source slash js slash file handling. Alright, this was a quick tour through some of the advanced app features in SVG code. I hope this app can become an essential tool for your image processing needs alongside other amazing apps like Scrooge or SVG OMG. SVG code is available at svgcode.de. See what I did there? You can review its source code on GitHub. Note that since PoTracer's GPL licensed, so is SVG code. And with that, happy vectorizing. I hope SVG code will be useful and some of its features can inspire your next app. Thank you very much for watching. See you next time.