android中svg介绍及使用[汇总]

最新推荐文章于 2024-03-17 09:37:45 发布

banzhuancaidao

最新推荐文章于 2024-03-17 09:37:45 发布

阅读量5.1k

点赞数

分类专栏： android 文章标签： android svg

本文链接：https://blog.csdn.net/banzhuancaidao/article/details/51785274

版权

android 专栏收录该内容

170 篇文章 1 订阅

订阅专栏

导语

1.1 where&when

场景A: UE妹子想实现下图效果，身为RD哥哥你会怎么做？帧动画？自己绘制？怎么可以为妹子增加工作量！
场景B: 美工妹子做的图片在多屏幕中失真了！！！身为 RD 哥哥怎么能不为妹子插自己两刀？
场景C: 待定（好吧，编不下去了）

以上场景如有雷同纯属巧合

没错，以上场景都可以用到SVG，厉不厉害!但svg是何方神圣？为什么可以满足如此让人觉得一千万头草泥马践踏的玻璃心呢？请往下看

1.2 what

简单的说svg是一种图片格式，严格的来说是一种开放标准的矢量图形语音，这种语言可以用来描绘图像（像不像xml定义drawble？），而且svg可以很没底线的被任何文字处理工具打开，因为是标记语言，所以不存在失真问题，而且由于是标记语言，所以比起图片来说，小到你尖叫！

1.3 why

开放标准的矢量图形语_开放标准的矢量图形语_开放标准的矢量图形语重要的事情说三遍！所以它 * 不失真，可大可小，可攻可受 * 比起图像文件小，下载快 * 可以自由修改 * 色彩分辨率相当高，且支持滤镜 * 跨平台

当然，缺点也是有的
A. Android中原生SVG只支持 Android 5.0 及以后版本（我生君未生，君生我已老，哎），不过没关系，有github大神已经实现，时空传送门，但这种方式肯定会增加学习和使用成本
B. 理论上讲，SVG的效率可能会不如PNG好，这是因为它需要运行时的计算和对应平台的渲染绘制。而且对于PNG来说的另一优势是在开启硬件加速的设备上，绘制Bitmap一个非常快速的过程。可以想象，让SVG不比PNG慢将是一件很有挑战的事情

1.4 who

RD哥哥快来玩儿啊

如何使用

2.1 Android 中 svg的一些tips介绍

2.1.1 svg 文件格式

svg 格式基本如下 “`java M 2948.00,18.00 C 2956.86,18.01 2954.31,18.45 2962.00,19.91 3009.70,28.94 3043.56,69.15 3043.00,118.00 3042.94,122.96 3042.06,127.15 3041.25,132.00 3036.37,161.02 3020.92,184.46 2996.00,200.31 2976.23,212.88 2959.60,214.26 2937.00,214.00 2926.91,213.88 2912.06,209.70 2903.00,205.24 2893.00,200.33 2884.08,194.74 2876.04,186.91 2848.21,159.81 2839.19,115.93 2853.45,80.00 2863.41,54.91 2883.01,35.57 2908.00,25.45 2916.97,21.82 2924.84,20.75 2934.00,18.51 2938.63,17.79 2943.32,17.99 2948.00,18.00 Z M 2870.76,78.00 … “` 够细心的童鞋已经发现其中有M，C，Z等一些字母，这是什么鬼？其实这些都是定义了一些关于移动的tag标识： M/m命令：moveto移动到绘制点，后面跟上坐标系点对即可。 Z/z命令：closepath一段路径等的闭合点，无参数。 L/l命令：lineto绘制一个点到另一个点的直线，多个坐标对可以绘制折线，后面跟上坐标系点对即可。 H/h命令：lineto从当前点到指定x点绘制水平直线，多个x无意义，后面跟坐标系x点即可。 V/v命令：lineto从当前点到指定x点绘制垂直直线，多个y无意义，后面跟坐标系y点即可。 C/c命令：cubic bezier三次贝塞尔曲线。 S/s命令：cubic bezier三次贝塞尔曲线。 Q/q命令：quatratic bezier二次贝塞尔曲线。 T/t命令：quatratic bezier二次贝塞尔曲线。 A/a命令：elliptical arc圆弧线。

由此引出解析出svg文件后可以把相应的标签映射成 canvas moveTo，lineTo等方式来“画”出svg

2.2 Android 5.0 及大于5.0版本系统相关使用

2.2.1 简单使用（静态图）

Android5.0以后支持SVG矢量图了，Google提供了一个标签用来创建VectorDrawable矢量对象，我们只要在svg的path标签中的字符串复制到的path标签中，就能创建出一个ImageView可以使用的矢量图形了，如：在drawable目录下新建一个根标签为的mysvgdrawable.xml,内容如下：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="256dp"
    android:height="256dp"
    android:viewportHeight="100"
    android:viewportWidth="100">
    <path
        android:name="heart"
        android:fillColor="#E91E63"
        android:pathData="M 2948.00,18.00
     C 2956.86,18.01 2954.31,18.45 2962.00,19.91
       3009.70,28.94 3043.56,69.15 3043.00,118.00
       3042.94,122.96 3042.06,127.15 3041.25,132.00
       3036.37,161.02 3020.92,184.46 2996.00,200.31
       2976.23,212.88 2959.60,214.26 2937.00,214.00
       2926.91,213.88 2912.06,209.70 2903.00,205.24
       2893.00,200.33 2884.08,194.74 2876.04,186.91
       2848.21,159.81 2839.19,115.93 2853.45,80.00
       2863.41,54.91 2883.01,35.57 2908.00,25.45
       2916.97,21.82 2924.84,20.75 2934.00,18.51
       2938.63,17.79 2943.32,17.99 2948.00,18.00 Z
     M 2870.76,78.00"
         />
</vector>

然后直接设置ImageView中即可

<ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/heart"/>

2.2.1 进阶使用（动态图图）

上面说了怎么显示SVG矢量图像，那怎么让SVG图像动起来？要动，才爽吗！要实现动态图就要用到AnimatedVectorDrawable这个类了，它就是负责VectorDrawable矢量图形的动画的，不过我们不能像属性动画那样去通过代码进行设置动画，而是需要通过animated-vector标签在xml文件中创建一个AnimatedVectorDrawable，只需要四步：

第一步

首先就是要创建一个VectorDrawable，在drawable目录下创建一个heart.xml，并且，我们知道矢量图是通过点和线进行绘制的，而在上篇中我又讲了path中M和Z两个命令，M是绘制的起始点，然后期间通过一系列的画直线、画弧等过程，最后通过Z命令来闭合这个绘制过程，也就是说绘制一个形状时候是从M出发到Z闭合。所以，面对path中混乱的排列，我们需要把M到Z的字符串进行隔开分别创建一个path（也可以合并为一个group，给它设置个name，然后对它进行动画），到时候进行绘制动画的时候，可以保证各个path绘制的时间一致，然后分别设置一个name，和线条的颜色和宽度，所以内容如下：

heart.xml 如下

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="256dp"
    android:height="256dp"
    android:viewportHeight="100"
    android:viewportWidth="100">
    <path
        android:name="heart1"
        android:strokeColor="#E91E63"
        android:strokeWidth="1"
        android:pathData="
M58.3,10.6C51.4,3.6,40,3.7,32,10.5c-1.3-1.1-2.6-2-4.1-2.8l-5.5-3.8c-0.3-0.2-0.6-0.2-1-0.1c-0.3,0.1-0.5,0.4-0.6,0.8l-0.2,1C15,4.9,9.6,6.7,5.7,10.6C-1.8,18.1-2,30,5.4,37.8L31.3,64c0.2,0.2,0.4,0.3,0.7,0.3s0.5-0.1,0.7-0.3l25.9-26.2C65.9,30.2,65.7,18,58.3,10.6z"
         />
    <path
        android:name="heart2"
        android:strokeColor="#E91E63"
        android:strokeWidth="1"
        android:pathData="
M57.2,36.4L32,61.8L6.8,36.4c-1-1-1.8-2.1-2.5-3.3l7.5,3.4c0.4,0.2,0.8,0.3,1.2,0.3c0.4,0,0.8-0.1,1.1-0.2l0.7,6.4c0,0.5,0.4,0.8,0.8,0.9l9.4,1.4c0,0,0.1,0,0.1,0c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.3-0.6,0.2-0.9l-4-17.6l13.3,11.9c0.2,0.2,0.4,0.3,0.7,0.3c0.1,0,0.2,0,0.2,0c0.3-0.1,0.6-0.3,0.7-0.6l3.2-8.9c0.2-0.4,0-0.9-0.4-1.2l-5.3-3.6c0.6-0.5,1.1-1.3,1.1-2.1l0.7-9.1c0-0.3-0.1-0.7-0.4-0.9c-0.3-0.2-0.7-0.2-1-0.1l-3.6,1.5l1.1-0.9c0,0,0,0,0,0c0,0,0,0,0,0c7.2-6.7,17.8-7,24.2-0.6C63.5,18.6,63.7,29.6,57.2,36.4z"
         />

    <path
        android:name="heart3"
        android:strokeColor="#E91E63"
        android:strokeWidth="1"
        android:pathData="
M14.3,20.7l1.6,1.9L5.3,26.4l-0.9-9.1L14.3,20.7z"
         />
    <path
        android:name="heart4"
        android:strokeColor="#E91E63"
        android:strokeWidth="1"
        android:pathData="
M19.5,18.3l1.5,3.8    l-2,1.2l-2.6-3.1L19.5,18.3z"
         />
    <path
        android:name="heart5"
        android:strokeColor="#E91E63"
        android:strokeWidth="1"
        android:pathData="
M17.2,24.3C17.3,24.3,17.3,24.3,17.2,24.3l0.4,0.5L14,34c0,0,0,0,0,0l0,0c-0.1,0.3-0.3,0.5-0.5,0.6c-0.3,0.1-0.6,0.1-0.8,0l-6.8-3.1l7.6-5.9L17.2,24.3z"
        />
    <path
        android:name="heart6"
        android:strokeColor="#E91E63"
        android:strokeWidth="1"
        android:pathData="
M22.4,23.5    l9.6,1.2l6.2,4.3l-2.5,6.8L22.2,23.7L22.4,23.5z"
        />
    <path
        android:name="heart7"
        android:strokeColor="#E91E63"
        android:strokeWidth="1"
        android:pathData="
M33.8,21.9c0,0.3-0.2,0.6-0.4,0.7c-0.2,0.2-0.5,0.2-0.9,0.2l-9.6-1.2l-0.3-0.7    l3.3-2.8l8.4-3.6L33.8,21.9z"
         />
    <path
        android:name="heart8"
        android:strokeColor="#E91E63"
        android:strokeWidth="1"
        android:pathData="
M30.4,11.9l-8.4,7L21,16.5c0,0,0-0.1-0.1-0.1l1.9-9.5c0,0,0.2,0,0.2,0s0,0,0,0l-0.2-0.4L30.4,11.9z"
        />
    <path
        android:name="heart9"
        android:strokeColor="#E91E63"
        android:strokeWidth="1"
        android:pathData="
M7.1,12c3.5-3.5,8.2-5.1,13.3-4.5l-1.5,8.8l-4.1,2.4L4.5,15.3C5.3,14.1,6.1,13,7.1,12z"
         />
    <path
        android:name="heart10"
        android:strokeColor="#E91E63"
        android:strokeWidth="1"
        android:pathData="
M2.6,19.6l0.8,8.3c0,0.3,0.2,0.6,0.5,0.7c0.2,0.1,0.3,0.2,0.5,0.2c0.1,0,0.2,0,0.3-0.1l2.7-1L3.3,31c0,0,0,0,0,0C1.8,27.4,1.6,23.3,2.6,19.6z"
         />
</vector>

第二步

我们在drawable目录下新建一个根结点为animated-vector的heart_animator.xml文件，也就是为矢量图像创建一个AnimatedVectorDrawable。（drawable指的是VectorDrawable，而target指的是对名字为name的path或者group进行动画）。其中内容如下：
heart_vector_animator.xml：

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/heart">
    <target
        android:name="heart1"
        android:animation="@animator/heart_animator" />
    <target
        android:name="heart2"
        android:animation="@animator/heart_animator" />
    <target
        android:name="heart3"
        android:animation="@animator/heart_animator" />
    <target
        android:name="heart4"
        android:animation="@animator/heart_animator" />
    <target
        android:name="heart5"
        android:animation="@animator/heart_animator" />
    <target
        android:name="heart6"
        android:animation="@animator/heart_animator" />
    <target
        android:name="heart7"
        android:animation="@animator/heart_animator" />
    <target
        android:name="heart8"
        android:animation="@animator/heart_animator" />
    <target
        android:name="heart9"
        android:animation="@animator/heart_animator" />
    <target
        android:name="heart10"
        android:animation="@animator/heart_animator" />
</animated-vector>

第三步

就是在animator目录下创建一个objectAnimator 动画，然后在第二步中分别设置给各个target。属性trimPathEnd的值是由0~1的，所以，path绘制时候也会表现出对应的动画，内容如下：
heart_animator.xml：

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

【注】：trimPathEnd这个属性是path的（表示绘制由开始点到绘制结束点），与之类似的还有trimPathStart（表示绘制由结束点后退到开始点）

第四步

最后一步，我们已经把矢量图像和对应的动画都设置好了，此时你如果运行则不会有动画效果，所以接下来就是需要我们通过代码把动画开启起来并设置给ImageView显示，代码为：

ImageView mImageView = (ImageView) findViewById(R.id.imageView);
        AnimatedVectorDrawable mAnimatedVectorDrawable =  (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.heart_vector_animator);//得到对应的AnimatedVectorDrawable对象
        mImageView.setImageDrawable(mAnimatedVectorDrawable);
        if(mAnimatedVectorDrawable!=null){
            mAnimatedVectorDrawable.start();
        }

我们得到AnimatorVectorDrawable对象后，只需要把这个Drawable对象设置给ImageView，然后通过AnimatedVectorDrawable.start()开启动画就可以了。

2.3 Android 5.0 之前版本系统使用

低于Android 5.0 的情况只能要么自己写一个工具，要么采用别人写好了的轮子了

参考

banzhuancaidao

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
android中svg介绍及使用[汇总]

导语1.1where&when场景A:UE妹子想实现下图效果，身为RD哥哥你会怎么做？帧动画？自己绘制？怎么可以为妹子增加工作量！场景B:美工妹子做的图片在多屏幕中失真了！！！身为 RD 哥哥怎么能不为妹子插自己两刀？场景C:待定（好吧，编不下去了）以上场景如有雷同纯属巧合没错，以上场景都可以用到SVG，厉不厉害!但svg是何方神圣？为什么可以满足如此让人觉得一千万头草泥马
复制链接

扫一扫