HB Blog 101: Vector Drawables - SVG To XML.

In Android development, and similar other mobile application development we observe that user interface and user experience plays the most vital roles. Specifically, in Android we have drawable making the application attractive. But, we also see that the drawable should be maintained for different densities, which eventually increases the size of the Apk as well as the application can become heavy.

Android came with the concept of vector drawable replacing old .png images with .xml vectors. These vector images are not only light weight but also gives more clear user interface for icons.
This lets you create a drawable based on an XML vector graphic. It can be defined in an XML file with the <vector> element.

Here is a simple VectorDrawable in this vectordrawable.xml file.

//vectordrawable.xml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="64dp" android:width="64dp" android:viewportHeight="600" android:viewportWidth="600" > <group android:name="rotationGroup" android:pivotX="300.0" android:pivotY="300.0" android:rotation="45.0" > <path android:name="v" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector>