Convert a PNG image to XML vector for Android use
XML vector images are for their little weight and simplicity commonly used in Android (and many other systems). You can find them, for example, as app icons sitting on the very top of the phone screen.
For some reason, I find the process of creating a simple xml vector from a raster image, a procedure undertaken by almost every app developer for Android, not so straightforward as it might seem. One might say, use the vector asset tool, which is part of Android studio, and it will do the job for you. However, the tool had never correctly worked for me. The PSD (photoshop document) or SVG files I have solemnly chosen for the conversion rendered blank preview screen and some error logs.
Scratching the surface of an Android developer site about conditions that apply for PSD or SVG files for a proper conversion I gave up. Instead of trying to find how to make vector asset tool working I googled the heck out of stack overflow and finally arrived at a functional solution. Months later, when encountering the same requisite for another app, I, in horror, realised the procedure went to oblivion in my mind. Luckily being able to trace back the solution, I am posting it here for the sake of my future work and maybe yours.
Steps to reproduce
-
Have your PNG file - size should not exceed 200x200px due to longer rendering, and the background should be one color. The color of the image itself does not matter so much. My example:
Note: If you created the image using graphical software, make sure that you flatten it before the export. This way, no layer complexity and other features remain. E. g. in photoshop, go to
layer -> flatten image. -
Now convert the given flat PNG to SVG. There is a variety of choice for this but inspired by this thread I recommend the Autotracer tool, an online image vectorizer.
-
From the SVG its now time to create XML. This could be possibly done in Android studio vector asset. Nevertheless, I sometimes struggled. A simple and useful online implementation can be found here: http://inloop.github. io/svg2android/. You can even see the generated xml code after the conversion.
-
And this might be the result. But, the problem you’ll probably encounter is that the background is still there, as shown in the picture below. Hence, the shown icon would be just a white rectangle. How to get rid of the background?
Well, peek into the xml code, and most probably at the beginning is the background path. If it’s white, it might be something like:
“`xml
```
Now, delete this part, and you’ll get the desired result.
