Android 中的 VectorDrawable 矢量图（xml格式） 转换成 svg

这里只简单的进行转换，其原理并没有详细研究。

一、简单步骤

两种格式的文件使用文本工具打开后，可以看到它们的格式略微有一些不同，根据其字段的字面意思，我们做以下替换。如下：

VectorDrawable 文件：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="#FFFFFF"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="@android:color/white"
        android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z" />
</vector>

SVG 文件

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
    enable-background="new 0 0 123.9 120.1" 
    version="1.1" 
    viewBox="0 0 123.9 120.1" >
    <style type="text/css">
        .st0{fill:#494547;} 
        .st1{fill:#FFFFFF;}
    </style>
    <path class="st0" d="m61.8 34.5c-14.4 0-26 11.6-26 26s11.6 26 26 26 26-11.6 26-26-11.6-26-26-26z" />
    <path class="st1" d="m75.8 60.4l-14-12.3-13.9 12.3v17.6c0 0.5 0.4 0.8 0.8 0.8h8.7v-7.7c0-0.5 0.4-0.8 0.8-0.8h7.2c0.5 0 0.8 0.4 0.8 0.8v7.7h8.7c0.5 0 0.8-0.4 0.8-0.8l0.1-17.6z" />
    <polygon class="st1" points="75.8 53.6 75.8 46.5 70.7 46.5 70.8 49.2 61.9 41.3 61.8 41.4 61.7 41.3 61.7 41.3 42 58.9 44 61.2 61.8 45.5 79.6 61.2 81.7 58.9" />
</svg>

虽然格式都是 XML 格式的，但其节点还是不一样的。好在都是矢量图，根据其节点的字面意思，我们可以做适当的替换，如下：

1、填充路径和颜色

如，在 VectorDrawable 中格式如下：
android:pathData 替换为 d
android:fillColor 替换为 fill

注意：没有 fillColor 的 VectorDrawable 路径在 SVG 中是fill ="none".

2、尺寸

如，在 VectorDrawable 中格式如下：
android:viewportHeight ="24"
android:viewportWidth ="24"

在 SVG 中格式如下：
viewBox ="0 0 24 24"

二、实例

矢量图 Drawable 如下：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="#FFFFFF"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="@android:color/white"
        android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z" />
</vector>

转换成 SVG 后，如下：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
    width="24dp"
    height="24dp"
    viewBox="0 0 24 24">
    <path
        fill="#000000"
        d="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z" />
</svg>