android使用SVG

最新推荐文章于 2025-06-19 09:10:13 发布

原创最新推荐文章于 2025-06-19 09:10:13 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android使用SVG

android 专栏收录该内容

15 篇文章

订阅专栏

本文探讨了在Android中使用SVG的优势，如减少APP体积、提高加载速度，并详细介绍了如何将SVG转化为Android兼容的VectorDrawable，包括使用在线工具、Android Studio插件以及解决兼容性问题的方法。此外，还分享了资源网站和实例代码，展示SVG在Android开发中的实际应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

android使用SVG

为什么要使用SVG.

SVG可以减小app体积。

SVG具有体积小、加载速度快、放大缩小无拉伸的特点。

Android中加载图片主要有两个阶段：获取本地资源时间+图片渲染时间。

经过试验：

png或jpeg的获取本地资源时间2923us, 渲染时间49um 总和2972us

svg获取本地资源时间247us ，627us 总和874us。

加载效率是png和jpeg的3倍。

SVG是一种采用XML来描述二维图形的语言，所以它可以直接打开xml文件来修改和编辑

SVG着重将图片的着色和绘制路径记录在SVG文件中，调用时重新渲染。

SVG介绍：

     1）SVG，即Scalable Vector Graphics 可伸缩矢量图形，这种图像格式在前端中已经使用的非常广泛了。
           SVG的W3C的解释： http://www.w3school.com.cn/svg/svg_intro.asp
           首先要解释下什么是矢量图像，什么是位图图像？
           1、矢量图像：SVG是W3C 推出的一种开放标准的文本式矢量图形描述语言,他是基于XML的、专门为网络而设计的图像格式，
               SVG是一种采用XML来描述二维图形的语言，所以它可以直接打开xml文件来修改和编辑。
           2、位图图像：位图图像的存储单位是图像上每一点的像素值，因而文件会比较大，像GIF、JPEG、PNG等都是位图图像格式。
     2）Vector，在Android中指的是Vector Drawable，也就是Android中的矢量图，
               可以说Vector就是Android中的SVG实现(并不是支持全部的SVG语法,现已支持的完全足够用了)

准备工作：

一、SVG文件图像转化

（1）、SVG转化成android的Vector工具：

http://inloop.github.io/svg2android/

（2）、将SVG转换成图像并编辑

http://editor.method.ac/

     （3）.使用AndroidStudio插件完成SVG添加（Vector Asset Studio）
                   详细：http://www.jianshu.com/p/d6c39f2dd5e7
                   AS会自动生成兼容性图片(高版本会生成xxx.xml的SVG图片；低版本会自动生成xxx.png图片)

     （4）.有些网站可以找到SVG资源
                   SVG下载地址： http://www.shejidaren.com/8000-flat-icons.html
                                  http://www.flaticon.com/

                                  http://www.iconfont.cn/plus --- 阿里巴巴

                   图片转成SVG https://vectormagic.com/

兼容问题，5.0以上的可以直接用：

一、兼容5.0以下的版本

   1、使用Android Studio 2.2以上的版本，gradle版本在2.0以上，准备步骤

   1.1、添加
·   defaultConfig {
       vectorDrawables.useSupportLibrary = true

   }
   1.2、添加
   compile 'com.android.support:appcompat-v7:25.3.1' //需要是23.2 版本以上的

   1.3、Activity需要继承与AppCompatActivity

   1.4、布局文件当中添加
       xmlns:app="http://schemas.android.com/apk/res-auto"

   2、使用在Actvity前面添加一个flag设置

       static {
           AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
       }

   2.1 ImageView/ImageButton
       XML app:srcCompat
       代码里面使用无区别

   2.2 Button 不支持app:srcCompat
       Xml 使用在Button的selector

   2.3 RadioButton 直接使用

   2.4 textview的drawable 直接使用



   2.5 使用的动态Vector Drawable
       主要是不能直接修改 pathData
       不能使用自定义interpolator

android代码：

ic_check.xml:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:name="path_check"
        android:fillColor="#FF000000"
        android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"/>
</vector>

check_anim.xml:

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:drawable="@drawable/ic_check">
    <target
        android:animation="@animator/check_animator"
        android:name="path_check"
        >
    </target>
</animated-vector>

check_animator.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="500"
        android:propertyName="trimPathEnd"
        android:valueFrom="0"
        android:valueTo="1"
        android:valueType="floatType"
        ></objectAnimator>

</set>

main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context="com.example.kerryqpw.myapplication.MainActivity">


    <ImageView
        android:layout_marginTop="20dp"
        android:onClick="anim"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/check_anim"
        />

</LinearLayout>

MainActivity.java:

public class MainActivity extends AppCompatActivity {

    static {
        AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public  void anim(View view){
        ImageView imageView = (ImageView) view;
        Drawable drawable = imageView.getDrawable();
        ((Animatable)drawable).start();
    }


}

实现效果：