VectorDrawable - what is it ?
** Introduction :** To represent an image in android, we use bitmaps. But the main problem with a bitmap image is that we cannot scale it without losing its quality. That’s why we need to create different bitmap images for different screen devices. With api level 21 ( android 5.0) , google has introduced support for vectorDrawable. (only for devices api >= 5.0 but using appcompat v 7:22 , we can ). VectorDrawable images are simply xml file that contains all information of an image (like lines, curves etc. ) and the color associated with each one of them. The biggest advantage of using vectorDrawable is that we need only one image for different screen devices.This not only reduces the size of the final apk, also it simplifies the maintenance of the project. Many other platforms use vector images in SVG (Scalable Vector Graphics) format, but we cannot use SVG with android application. Even though there are 3rd party libraries that we can use to work with SVG files, but instead, I recommend to use Vector Asset Studio to convert SVG files to vectorDrawable.
Vector Asset Studio : This tool was introduced with android studio 1.4 . Using this tool, we can convert SVG files to vectorDrawable and also we can use any material design vector assets provided by the software. Follow these steps to start Vector Asset Studio :1. Open any project on Android Studio. 2. Right click on “res” -> new -> Vector asset 3. As you can see we can choose inbuilt material design icon files and also local svg files.
But VectorDrawable format supports a subset of SVG features and so it will not work for all SVG files. e.g. if SVG file is using Gradient ,pattern fills or l_ocal IRI_ reference , it will not work.
3rd Party Library :
Other 3rd party SVG to vectorDrawable converters are also available like svg2android ,but it has also the same restrictions. Recently this tool has added support for local IRI references . you must select the Bake transforms into path (experimental)option for this. SVG gradients and pattern fills are still not supported ,as VectorDrawable doesn’t support itself .
- Also, we can use SVG optimisation tool like svgomg to optimise a complex svg before converting it to a vectorDrawable using any of the method explained above.
Ok..so let’s check which one will be better for vector conversion. I am using this vector from freepik for this example.
- Download it and Extract the zip file
4.Next, I will try to convert it to vectorDrawable :
Using Android Studio :
- File -> new ->Vector Asset -> click on Local SVG file and select the svg file.
Oops…seems like this vector file contains patterns . As we have mentioned above ,vectors with gradient , pattern and IRI reference are still not convertible.
**Using svg2android tool : **
- Drag and Drop the svg file on svg2android -> copy the generated xml code -> create one new drawable file and paste it
Pattern part is still not converted but, at least, all other parts are converted properly.
From the above image, it is clear that the “football” vector is causing the problem. So if we want to convert any svg vector file to android vectorDrawable, svg2android is more helpful than vector studio . At least we can check which part can be convertible and which part is not. I have tried it on “Android Studio 2.1 preview 3” , and since vector is now supported on pre-lollipop devices, hopefully, google will add some more features to Vector Studio in future.