Create a transparent SVG icon from a high-resolution JPEG image using Inkscape
As a freelance engineer, there are occasions when you are given a JPEG image from a client, and you want to convert it to a vector image with a transparent background to be development-ready. Here is one way to do it without spending a dime.
Let’s say you are given a JPEG image to be used for development as an icon. For demonstration purposes, I will use the Flutter icon.
Since this image is JPEG, it has a white background. For icons, we normally want a transparent background. Also, this is a raster image which makes it harder to use for development. If you have a vector image like SVG, it is much easier to use. For web development, you can just use it. For mobile development, you can generate multiple-sized PNGs easily using free design tools like Figma / Inkscape / librsvg. Usually, this process is handled by a designer, but in a small project, I sometimes encounter a situation where we don’t want to include a designer for just a couple of images.
So, this should be rather a trivial trick for a designer and quite a niche technique for a developer, but hey, it could help somebody :)
0. Meet Inkscape
A designer might have access to expensive Adobe tools like Illustrator, but as a developer, we want to do it for free. Let’s install Inkscape.
Open Inkscape app and choose “New Document”.
From “File” → “Open” select the Flutter icon JPEG image. It would look like this.
1. Fit the canvas to the image
At this point, sometimes the canvas size is much larger than the opened image. In that case, we want to adjust the canvas size to be the same as the image.
Select ‘File’ → ‘Document Properties’
Hit the ‘Resize to content’ button.
2. Trace Bitmap
Select the image and right-click to open the context menu. Select ‘Trace Bitmap.’ This menu is what does the vector image generation.
There are many options in the “Trace Bitmap” tab, but my empirical selection is as follows.
3. Export vector image
If you look at the ‘Layers and Objects‘ tab, you can see that a folder named ‘gXXX’ is generated. This folder includes the traced vector paths.
We don’t need the original JPEG image in the layer, so hide it. Select the vector folder and go to the ‘Export’ tab.
You should be able to see the preview on the lower part of the Export tab, and that should show a transparent background now. Check ‘Export Selected only’ and select ‘Inkscape SVG’ as export type, and hit ‘Export’ button.
Now, you should see the SVG file in your filesystem. You can drag that file to Figma for example and see it has indeed transparent background now, and the shape does not get pixelated even if you resize it.
4. Export PNGs for mobile development
This is a Figma example, but a similar thing should be possible using many other tools. You can resize the vector object on Figma to the exact size you want to see on the app screen and Export different scale PNGs from the Export options.
This article was not exactly an engineering article, but some design tricks would be handy for frontend developers, and I believe this could be one ;) Hopefully, some of you guys find this helpful.
