Notes about VectorDrawable

1.Create Vector Drawables

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="256dp"
    android:height="256dp"

    android:viewportHeight="32"
    android:viewportWidth="32"> <!--size of the virtual canvas-->
    <!--draw a path:this is a heart-shaped path-->
    <path android:fillColor="#8fff"
        android:pathData="M20.5,9.5
                        c-1.955,0,-3.83,1.268,-4.5,3
                        c-0.67,-1.732,-2.547,-3,-4.5,-3
                        C8.957,9.5,7,11.432,7,14
                        c0,3.53,3.793,6.257,9,11.5
                        c5.207,-5.242,9,-7.97,9,-11.5
                        C25,11.432,23.043,9.5,20.5,9.5z"
        />
</vector>

2.Path data

A path is defined by including a ‘path’ element which contains a d=”(path data)” attribute,where the ‘d’ attribute contains the moveto,line,curve(both cubic and quadratic Béziers),arc and closepath.

The ‘M’ indicates a moveto,
the ‘L’ indicates lineto,
the ‘z’ indicates a closepath.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4cm" height="4cm" viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>Example triangle01- simple example of a 'path'</title>
  <desc>A path that draws a triangle</desc>
  <rect x="1" y="1" width="398" height="398"
        fill="none" stroke="blue" />
  <path d="M 100 100 L 300 100 L 200 300 z"
        fill="red" stroke="blue" stroke-width="3" />
</svg>

commands

M (absolute) m(relative):moveto (x y)+
Z or z:closepath (none)
L(absolute) l(relative):lineto (x y)+
H(absolute) h(relative):horizontal lineto x+
V(absolute) v(relative):vertical lineto y+

The curve（曲线） commands

• Cubic(三次) Bézier commands(C,c,S and s)：
  C(absolute) c(relative):curveto (x1 y1 x2 y2 x y)+
  S(absolute) s(relative):shorthand/smooth curveto (x2 y2 x y)+
• Quadratic（二次） Bézier commands(Q,q,T and t):
  quadratic Bezier curveto (x1 y1 x y)+
  Shorthand/smooth quadratic Bezier curveto (x y)+
• Elliptical(椭圆) arc commands (A and a):
  ellipitical arc (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+

The grammar for path data

• *: 0 or more
• +: 1 or more
• ?: 0 or 1
• (): grouping
• |: separates alternatives
• double quotes surround literals

Vector Asset Studio

It helps you add material icons and import Scalable Vector Graphic(SVG) files into your app project as a drawable resource.

Compared to raster(光栅) images,vector drawables can reduce the size of your app and be resized without loss of image quality.

Android 4.4(API level 20) and lower doesn’t support vector drawables.
If your minimum API level is set at one of these API levels,Vector Asset Studio also directs Gradle to generate raster images of the vector drawable for backward-compatibility(向下/后兼容).

Supported vector graphic types

material icons

Studio’s function:

• 
  
• helps you choose,import,and size material icons,as well as define opacity and the Right-to-Left(RTL) mirroring settings.
• helps you to import your own SVG files.
  

Vector Asset Studio supports the essential standard,but not all features.When you specify an SVG file,Vector Asset Studio gives immediate feedback about whether the graphics code is supported or not.

Considerations for SVG files

A vector drawable is appropriate for simple icons.

Launch icons do have many details,so they work better as raster images.

The initial loading of a vector graphic can cost more CPU cycles than the corresponding raster image.

We recommend that you limit a vector image to a maximum of 200 x 200 dp; otherwise, it can take too long to draw.

Using this approach, you can add a tint to the vector drawable that you placed in a layout, and the icon color changes to the tint color. If the icon color isn’t black, the icon color might instead blend with the tint color.

<vector>

android:width
android:height
android:viewportWidth
android:viewportHeight
android:alpha
<group>

android:rotation
android:pivotX
android:pivotY
android:scaleX
android:scaleY
android:translateX
android:translateY
<path>

android:pathData
android:fillColor
android:strokeColor
android:strokeWidth
android:strokeAlpha
android:fillAlpha
android:strokeLineCap
android:strokeLineJoin
android:strokeMiterLimit

Only Android 5.0 (API level 21) and higher supports dynamic attributes, for example,

android:fillColor="?android:attr/colorControlNormal".

Performance

1.Simply the path
2.Limit the image size(memory and upload time)

Suggestion：use the VectorDrawable for the icons and buttons with reasonable sizes,for example, less than 200*200dip

3.Use the internal cache

Don’t update the attributes of the VectorDrawable unless necessary.

When there’s no changes to the attributes like width,height,or alpha,our framework will be able to keep a cached bitmap without redrawing the path or reuploading texture to the GPU.

For AnimatedVectorDrawable caching won’t help here.
So keep your animations short and sweet.

Avoid heavy operations.