Android App performance Optimization series view article--svg image version compatibility and performance optimization solutions

SVG vectors are far superior to PNG bitmaps in terms of image expressiveness, and are much more convenient for maintainability and modification than bitmaps. Although Android introduced the SVG image solution in version 5.0: Vector. However, compatibility and performance are so poor that it has not been widely used so far.

This blog to bring you a relatively good solution: Svg-android (the author is I ...) Compared to vectors, it is compatible with more than 2.3 in terms of compatibility, and also has a qualitative improvement in terms of performance.

Open Source Library Address: https://github.com/MegatronKing/SVG-Android

PS: The main idea of reference to the SVG solution.

First, why Svg-android born

Android supports SVG images from 5.0, which is vectordarwable, but there are many problems compared to commonly used PNG bitmaps.

1, Performance aspects

Under normal circumstances, the performance loss of the vector is about 3 times times of PNG, mainly in parsing XML and computing path two stages, such a large performance gap, resulting in very few companies will adopt.

2. Compatibility

Because Android 5.0 and above appear vectordarwable, in order to be compatible with the low version, Google introduced the Support-vector-drawable Compatibility library, but the actual effect is not good. First, the minimum version of the Support-vector-drawable Compatibility library is 23.2.0 and relies on support-v4, and if the SUPPORT-V4 version is too low, the compatibility library cannot be introduced. Second, if you want to use the vector directly in layout, you must introduce the SUPPORT-V7 package, and for applications that do not use the V7 package, you can only discard the vector.

3. Package Volume

Although the vector file occupies a smaller footprint than a PNG image, in order to be compatible with the lower version, the package compilation tool packages the vector file with the corresponding PNG image into the APK, which can easily cause the packet volume to swell.

4. Practicality

Although the compatibility library can be compatible with the lower version, but in the use of the API is not so easy, we can hardly directly in the XML directly use, such as src= "@drawable/svg", which greatly restricts the development efficiency.
For the above several shortcomings, Svg-android came into being, perfect support 2.3+!

Second, svg-android performance comparison

1. svg-android VS PNG

Svg-android in decode stage can be far better than PNG bitmap, but draw rendering stage is relatively inferior to many, later will focus on optimizing this piece.

2. Svg-android VS Vector

Svg-android's performance in the Decode phase is far ahead, time-consuming around 100-200us, at least 10 times times higher than vector
Svg-android is also slightly ahead of the draw stage, saving about 250US

Overall, the svg-android performance was slightly 0.2-0.5 times times lower than the PNG bitmap, up 2-3 times higher than the vector. But for the rendering of the image effect, svg-android is much better than PNG, and does not distort because of the size stretch.

is 100 times load test data, unit us, it is obvious svg-android overall effect still has advantage.

Three, svg-android realization principle

1. Pre-analysis

Judging from the performance test data of vectors, most of the time-consuming is in parsing XML and drawing rendering two phases. To improve performance, the svg-android approach is to transfer some of the time-consuming operations from the runtime to the pre-compilation, that is, before parsing. At the same time, because the SVG file's Filldata data is shown as path in Android, this part of the calculation can be calculated in advance.

Therefore, the Svg-generator library will parse the vector file in advance to generate the Svgrenderer class for direct rendering, and the number of each instruction in the Filldata will be pre-calculated to generate the Java path code directly, Svgdrawable can draw SVG graphics as long as they are svgrenderer.

2. No perception

In order to improve development efficiency, we hope that developers can use SVG images as well as using regular PNG, in the layout file directly using @drawable/xxx, or Java code in the use of r.drawable.xxx. To solve this problem, we use the bogus method to generate an empty shape file using svg-generator and put it into drawable-anydpi. The corresponding Svgdrawableconstantstate is also pre-injected into the resources ' spreloadeddrawables cache, intercepting all requests for the shape.

Iv. How to access svg-android

1. svg image converted to vector file

Since Android only supports some of the canonical SVG files, so we still follow the official idea, Sir into a legitimate vector file, so there is also a good thing is to refer to dimen and color, aspects of the uniform modification of size and color.

There are many ways to convert SVG images into vector files.

Mode one: Use svg2android website conversion Http://inloop.github.io/svg2android/

Mode two: Using the Android Studio right----Vector Asset----Local SVG File

2, Svg-generator analysis vector automatically generated code

First, configure the parameters in the Config class of the Svg-generator module: include the app package name, generate the Svgrenderer code package name, and the dimen and color referenced in the vector.

Second, configure two parameters in the Build.gradle file of the Svg-generator module: The directory where the vector file is stored, and the main project module directory.

Next, you run the Svg-generator task run. You can either click in the Gradle task List or run the command: Gradle task run

Finally, we can see that the Svgrenderer class is generated under the specified directory, and the class name is the picture name. At the same time, the corresponding empty shape file is generated in the drawable-anydpi.

3. Introduce the Svg-support package into the application and load the Svgloader

In the application's application custom class, Mount Svgloader (auto-generated in the previous step), as long as one line of code!

Wu, Enjoy svg-android!

Welcome Fork & Star! Welcome Fork & Star! Welcome Fork & Star!

This blog is not regularly updated continuously, welcome attention and Exchange:

Http://blog.csdn.net/megatronkings

Android App performance Optimization series view article--svg image version compatibility and performance optimization solutions