vector 转 svg 方法

1. 前言

        在项目中，图片资源多半都是使用vector矢量图标，使用它有什么好处呢？

      1. Vector图像可以自动进行适配，不需要通过分辨率来设置不同的图片
      2. Vector图像可以大幅减少图像的体积，同样一张图，用Vector来实现，可能只有PNG的几十分之一
      3. 使用简单，很多设计工具，都可以直接导出SVG图像，从而转换成Vector图像
      4. 功能强大，不用写很多代码就可以实现非常复杂的动画，比较成熟、稳定，前端已经非常广泛的进行使用了

        之前一直是Ux设计好svg图片后，开发人员通过AndroidStudio工具转换成Vector图片，然后应用到项目中，某一天，Ux需要这个图片的原稿，但是Drawable.xml 他又没有工具可以查看图片长什么样子，也无法在此基础上优化图标，那么问题来了，这个时候就需要你去把vector矢量图片逆转成svg图片了，等Ux重新设计好了再给你使用。 好了本篇文章就来说说怎么逆转换。

2. vector属性

我们来看一个ic_root_video.xml 文件：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="20dp"
    android:height="20dp"
    android:viewportWidth="40"
    android:viewportHeight="40">
    <path
        android:fillColor="#00000000"
        android:fillType="nonZero"
        android:pathData="M20,20m-17,0a17,17 0,1 1,34 0a17,17 0,1 1,-34 0"
        android:strokeWidth="4"
        android:strokeColor="#595959" />
    <path
        android:fillColor="#595959"
        android:fillType="evenOdd"
        android:pathData="M25.3147,20.907L18.0975,25.8542L18.0975,25.8542C18.0433,25.8788 17.9878,25.9008 17.9311,25.9202L17.9311,25.9202C17.8769,25.9392 17.8213,25.9553 17.7648,25.9681L17.7532,25.9681L17.6783,25.9831L17.6467,25.9831C17.6184,25.9831 17.5902,25.9921 17.5602,25.9966L17.5469,25.9966L17.4721,25.9966L17.4504,25.9966L17.3606,25.9966C16.6687,26.0443 16.0626,25.5821 16,24.9592L16,24.9592L16,15.0408L16,15.0408C16.0626,14.4179 16.6687,13.9557 17.3606,14.0034C17.6293,14.0016 17.8938,14.0636 18.1274,14.1833L25.2948,19.099C25.7145,19.2365 25.9955,19.5943 26,19.9968C26.0044,20.3992 25.7313,20.762 25.3147,20.907L25.3147,20.907Z"
        android:strokeWidth="1"
        android:strokeColor="#00000000" />
</vector>

矢量图片显示效果为：

下面解释下该xml文件的属性
首先vector标签是一个drawable对象，所以我们要把它放在res/drawable目录下。

android:width与android:height即该矢量图要显示的宽高，这与png图是一样的；

android:viewportWidth即画布宽度，值为数字，后续矢量图就是在该画布中绘制出来的；
android:tint是一个渲染色，通过改变该值，可以做到同一张图片显示不同颜色的效果，这对于区分选项的选中和非选中状态是非常有用的；

path子标签是矢量图的主要部分了，android:fillColor为该path绘制部分的填充色，因为我们可以有多个path标签，使用此属性可以实现不同path绘制图案的区分，需要注意的是该颜色会与全局的android:tint混合；

android:pathData即path绘制路径，因为过长，这里省略了中间部分，在本例中，我们的画布大小为96*96，画笔将在该范围内进行绘制，M表示移动画笔，z为闭合图案；

android:strokeColor为绘制图案的边框色，一般我们不用作设置。

3. vector --> svg

转换方法英文说明：

android:pathData replaced with d
android:fillColor replaced with fill
android:strokeColor replaced with stroke
android:strokeWidth replaced with stroke-width
android:fillType replaced with fill-rule
A path in the VectorDrawable without fillColor is fill="none" in SVG.
android:viewportHeight="24" android:viewportWidth="24" is viewBox="0 0 24 24" in SVG.

实际操作步骤：

1. 将xml文件的后缀名改为svg，以文本形式打开，进行以下操作

2. 将元素<vector> 改成 <svg>

3. 将android：pathData替换为d

4. android：fillColor替换为fill（如果没有fillColor的VectorDrawable中的路径在SVG中是fill =“none”）

5. android:strokeColor  替换为 stroke

6. android:strokeWidth 替换为  stroke-width

7. android：viewportHeight =“40”android：viewportWidth =“40”对应修改为SVG中的viewBox =“0 0 40 40”

根据上述操作步骤，修改后缀名xml为svg

ic_root_video.svg, 代码如下：

<svg xmlns:android="http://schemas.android.com/apk/res/android"
  width="20" 
  height="20" 
  viewBox="0 0 40 40">
    <path
        fill="#00000000"
        fill-rule="nonZero"
        d="M20,20m-17,0a17,17 0,1 1,34 0a17,17 0,1 1,-34 0"
        stroke-width="4"
        stroke="#595959" />
    <path
        fill="#595959"
        fill-rule="evenOdd"
        d="M25.3147,20.907L18.0975,25.8542L18.0975,25.8542C18.0433,25.8788 17.9878,25.9008 17.9311,25.9202L17.9311,25.9202C17.8769,25.9392 17.8213,25.9553 17.7648,25.9681L17.7532,25.9681L17.6783,25.9831L17.6467,25.9831C17.6184,25.9831 17.5902,25.9921 17.5602,25.9966L17.5469,25.9966L17.4721,25.9966L17.4504,25.9966L17.3606,25.9966C16.6687,26.0443 16.0626,25.5821 16,24.9592L16,24.9592L16,15.0408L16,15.0408C16.0626,14.4179 16.6687,13.9557 17.3606,14.0034C17.6293,14.0016 17.8938,14.0636 18.1274,14.1833L25.2948,19.099C25.7145,19.2365 25.9955,19.5943 26,19.9968C26.0044,20.3992 25.7313,20.762 25.3147,20.907L25.3147,20.907Z"
        stroke-width="1"
        stroke="#00000000" />
</svg>

转换完成后，可以点击直接打开图片，如果打开报错，则转换代码有问题，请仔细检查一下哪里写错了。正常显示图片为：

4. svg --> vector

好了，假设Ux已经优化过图标给你了，接下来你就需要再顺转一下，然后替换原来的ic_root_video.xml图标，编译app验证查看优化后图标，本小节就顺带说一下方法：

1. 打开一个能正常编译apk的Android Studio工程

2. 在drawable目录下 右键 -> New -> Vector Asset

3. 在如下界面中,配置icon的名称，icon的宽高，点击next，finish 生成vector图片

5. 总结

        本篇文章介绍了 svg 与 vector 互转的方法，供参考，网上也有很多工具，基本都是需要C币下载的，文章中介绍的方法是手动修改代码，可行的方法。后续有好的工具直接转再补充进来。