Stop using PNGs! Use Vector drawable. Why?

What is Vector drawable?

Vector drawables allow you to replace multiple png assets with a single vector graphic, defined in XML. While previously limited to Lollipop and higher devices, both VectorDrawable and AnimatedVectorDrawable are now available through two new Support Libraries support-vector-drawable and animated-vector-drawable, respectively.

Reasons of using vector drawable

• The important point of vector graphics is the power of scalability. If we try to enlarge the pixel based image, it only enlarge the size of the squares making up the image area and pixel based image will be jagged. If we consider the vector image, it will remain in its best quality.

• Data can be represented in original resolution without generalization.

• Graphical outputs of the images are more pleasing than the created as raster image.

• In some data like hard copy maps, no data conversion is needed.

• Every lines in a vector graphics represents different and distinct object so each object can be edited as many times. For example, if we take art file with a circle in back ground. It can be opened any time even days later and change circle to a square. It will be at their best quality.

• Another very important reason of using vector graphics rather than raster is their size. Vector objects are much smaller than raster image format. If we have full size image to update, the vector file might only take few kilobytes of space on your system, where the same image in medium resolution bitmap format might not place on CD ROM.

Using Android Vector Drawable with Support 23.2.0

Android Studio 1.4 introduced limited support for vector drawables by generating pngs at build time. To disable this functionality (and gain the true advantage and space savings of this Support Library), you need to add vectorDrawables.useSupportLibrary = true to your build.gradle file:

// Gradle Plugin 2.0+  
 android {  
   defaultConfig {  
     vectorDrawables.useSupportLibrary = true  
    }  
 }

You’ll note this new attribute only exists in the version 2.0 of the Gradle Plugin. If you are using Gradle 1.5 you’ll instead use

Gradle Plugin 1.5  
 android {  
   defaultConfig {  
     generatedDensities = []  
  }  
  // This is handled for you by the 2.0+ Gradle Plugin  
  aaptOptions {  
    additionalParameters "--no-version-vectors"  
  }  
 }

Using vector drawables in Imageview

You’ll be able to use VectorDrawableCompat back to API 7 and AnimatedVectorDrawableCompat on all API 11 and higher devices. Due to how drawables are loaded by Android, not every place that accepts a drawable id (such as in an XML file) will support loading vector drawables. Thankfully, AppCompat has added a number of features to make it easy to use your new vector drawables.

Firstly, when using AppCompat with ImageView (or subclasses such as ImageButton and FloatingActionButton), you’ll be able to use the new app:srcCompat attribute to reference vector drawables (as well as any other drawable available to android:src):

<ImageView  
  android:layout_width="wrap_content"  
  android:layout_height="wrap_content"  
  app:srcCompat="@drawable/ic_add" />

And if you’re changing drawables at runtime, you’ll be able to use the same setImageResource() method as before — no changes there. Using AppCompat and app:srcCompat is the most foolproof method of integrating vector drawables into your app.

Converting SVG to Vector Drawable

You can convert SVG Vector drawable using following ways-

Using Online SVG to Vector Convertor

Visit http://balrampandey19.github.io/

dorp file(.svg) in given box and download generated Vector Drawable(.xml) .

Using Android Studio Vector Convertor

you can simply right click your drawable folder, select new->Vector asset and point it to your local SVG file

I prefer use first way convert SVG to Vector because this is very easiest way. and you can also convert multiple SVG at one time.

You can find Source code of Vector Drawable with Animated Vector drawable.https://github.com/balrampandey19/android-vector_drawable

Help me improve this article

Please add comments or contact me if you see any errors and omissions, or if you want to share information and tips about using vector icons in development. I will regularly update this article with more info.