Convert the SVG and PSD image file into png or VectorDrawables for android studio

As an Android developer, we are faced with so many technical stuff while building an awesome application in terms of less APK size.  So all the technical stuck is actually part of developer life.  In this tutorial, I am trying to explain about the vector drawable which is the frequently used in android application development.

In Android, a vector file is an XML file in the format of binary which works well in all android screen size device.  We need to store the vector file inside the drawable folder to reflect in the user interface. But the problem comes here when your client has provided the SVG  or PSD file format for image and icon for your android application.

Generally, an android studio is not supported the SVG and PSD file to keep in your drawable folder to load an icon or image. In that case, we need to convert the SVG and PSD file into either PNG file or Vector Drawables file. But the question is how to convert into vector Drawable file?

Convert into Vector Drawables:

We can convert the SVG and PSD file in many ways. Either you can use the online website to convert. But we need to make much better way then I would be recommended two different methods to convert into vector drawable file.

1. Android Studio Vector Asset.
2. Using by a command in Android Framework

Ok, Let’s explore by the first method to convert the SVG or PSD file into vector Drawable file.

Android Studio Vector Asset.

Android Studio has an option to convert the SVG file into vector formate. You need to right click on the drawable folder of your android studio project and click the new option and then select the Vector Asset. For your reference, I am giving the snapshot below.

Please select the SVG file from the directory path and convert.

But the problem here is that what will happen if you have a big number of icons and images, then it is very difficult to convert all the icons one by one is not realistic. So, in this case, we need to find the way that all images can convert in a single command.

That’s great. Now let’s see the use the second option by convert by using the command. It is a little bit difficult but good to explore the code which is provided by the Android framework.

Using by a command in Android Framework:

Before we explore the android framework base code, we can use the exiting tools to use for conversion. And I am really thankful to Nick Butcher. He has provided and shared SVG to vector drawable tool into zip format into Google Drive. What you need to just download the file and unzip it and run the below command.

The following command will convert all SVGs in a directory called svgs/, convert them all into VectorDrawables, and write them to a directory called vectors/. Note that both directories must exist beforehand.

./vd-tool -c -in svgs/ -out vectors/

That’s was great. Now question that how to get the tools from the Android repository and build it? So I would say do not worry we will sync the android repository to use the framework tool to run and execute the code.

To download the Android open source code you need to first install the repo and git version control in your system. Once you have done the steps now you can use below git command to initialize the repo and sync.

Repo command:

repo init -u https://android.googlesource.com/platform/manifest

repo init -u https://android.googlesource.com/platform/manifest -b android-4.0.1_r1

repo sync

repo sync -j8

cd ./tools/base
../gradlew publishLocal