A, leads

I have learned how to use SVG in the project in these two days, and I have learned many things I didn’t know before. Here I plan to make a summary in the form of question and answer.

This is mainly a summary of the practical use of SVG in the project. It pays more attention to practicability, so if you want to know some basic concepts, you can go to The Android Qunxia Biography to learn.

Second, the question and answer

What are the benefits of using SVG in your project?

SVG is summed up with two advantages, first of all, no distortion in magnification, and second, smaller bytes than the same icon. PNG icon. SVG. So the significance of application to the project is very obvious, amplification will not distortion, then for the Android end of the adaptation will benefit a lot, do not have to prepare multiple sets of icon resources, can reduce the size of APK.

To test this, go to Ali vector library and download a.svg and.png with the same ICONS.

Use them in XML, with the.png icon above and the.svg file icon below.

After running it, you can see it slightly, and the following SVG should be clearer. Now zoom in on them all.

The difference between the two is obvious, as the.png image above is already very blurred. However, the size of the two is really just a.png and.svg compared to each other, they have about the same number of bytes.


How many KINDS of SVG are used in your project?

SVG comes in two forms, one static, as shown above, and the other dynamic, which is typically the Google toolbar menu icon with a rotation effect. AnimatedVectorDrawable (AnimatedVectorDrawable, AnimatedVectorDrawable, AnimatedVectorDrawable, AnimatedVectorDrawable) AnimatedVectorDrawable connects a static VectorDrawable to a dynamic objectAnimator.


How can SVG be used in Android Studio projects?

With the.svg file in hand, res –> right-click new –> Vector Assect in Android Studio

There are three things to notice in this interface, one, two, three in red

  • 1 indicates the MD style icon provided by Google

  • 2. Use a local.svg file icon, such as the chart file I downloaded from Ali vector library earlier. Just load it
  • 3 The most important thing is to check it, and set the Size on the left slightly larger, 100 or 200, because I have tested the funny thing, if the check box is used to provide its own Size, the result will be blurred after the control is loaded and used, and the width and height is set to a larger 100dp or 200dp. So I guess the Size set is the maximum icon support. And most importantly, changing the larger size does not increase the number of bytes in the generated.xml file.


Where did SVG come from?

If you look at the basics of SVG, you know that you can also see this icon by drawing it in an XML file, such as opening the icon XML file above

We can understand some of the properties, width, height, path, etc., in simple graph XML files, but we can’t draw them in complicated ones, and they are very difficult to understand, so this part is not our front-end responsibility. In general projects, as long as the ICONS are not very complicated, they can be retrieved from the UI. They have a tool to export.svg files, which we use only, and of course we can change width height color and so on, but there is not much we can do.


Use of SVG below 5.0?

Many bloggers are saying that SVG cannot be used under 5.0 and that Gradle needs to be configured using the method provided by Google, otherwise it will crash. The reason, of course, is that the API provided by Google didn’t come until after 5.0. In fact, it is ok, for example, the system version here is 4.4, but there is no problem. After testing, it is found that if you do not use SVG with drawing, there is no problem. If static SVG can be used before or after 5.0, this is very important.

A good summary of how to use SVG in a project is pretty much all there is to it. It is very practical and directly targeted at project development.