将 SVG 文件转换为 Android Vector Drawable XML,同时保持组结构不变

Converting SVG file to Android Vector Drawable XML while keeping the group structure in place

我想将 SVG 文件转换为 Android Vector Drawable XML。我需要 SVG 的结构。为了扩展 SVG 将多个元素组合在一起,我需要该分组也反映在 Android Vector Drawable 中。

不幸的是,我发现执行 SVG 到 Vector Drawable 转换的工具试图以一种摆脱文件结构中现有分组的方式最小化文件大小。

有没有一种聪明的方法来进行转换,使分组树完好无损?

你试过Shape Shifter了吗?它是一个程序,可以让您轻松地为矢量和 svg 制作动画,但您可以导入 .svg 并立即导出到 Vector Drawable。它也应该保留您的组结构(但我没有做出任何承诺,因为我自己还没有明确地这样做过)。

创建一个空白 xml 文件。写入 VectorDrawable 的所有属性,pathdata 除外。在写字板中打开 SVG 文件。复制路径数据,然后将其粘贴到您创建的 xml 文件中。

示例 SVG:

 <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 -174 1280 870">
  <g transform="matrix(1 0 0 -1 0 696)">
   <path fill="currentColor"
d="M540 97.4004l-39 21q-47 30 -77 84q-35 62 -34 129q2.10449 95.0107 62 163q74 84 184.5 84t179.7 -86.4004q59.7998 -73.5996 61.2002 -151.199q1.59961 -88.4004 -44.4004 -153.601q-34 -46.7998 -75.5996 -69.5996l-51.6006 -19.2002q18.2002 -2 37.2002 -2.40039
q78 0.400391 157 0.400391l-12 27q-3 4 -23.7998 -5.7998z" />
  </g>

</svg>

示例 xml 具有相同路径数据的文件:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="1280dp"
        android:height="870dp"
        android:viewportWidth="1280.0"
        android:viewportHeight="870.0">

    <path
        android:pathData="

        M540 97.4004l-39 21
        q-47 30 -77 84
        q-35 62 -34 129
        q2.10449 95.0107 62 163
        q74 84 184.5 84 t179.7 -86.4004
        q59.7998 -73.5996 61.2002 -151.199
        q1.59961 -88.4004 -44.4004 -153.601
        q-34 -46.7998 -75.5996 -69.5996l-51.6006 -19.2002
        q18.2002 -2 37.2002 -2.40039 
        q78 0.400391 157 0.400391l-12 27
        q-3 4 -23.7998 -5.7998       "

        android:strokeLineCap="round"
        android:strokeColor="#f00f"
        android:fillColor="#00000000"
        android:strokeWidth="32"/>
</vector>

注意:pathdata 末尾的 "z" 被删除,为了更好的可读性,这些行也被我手动重新排列。

这样您将不得不手动将 SVG 一次转换为 xml。

2019 年更新:不需要使用任何外部工具或旧答案所指出的 Heck。 Android Studio 的 Asset Studio 允许将 SVG/PSD 转换为矢量

  • 右击app文件夹->新建矢量资源
  • Select 单选按钮中的第二个选项,用于从本地文件创建矢量,如下图所示。
  • 单击文件夹图标加载本地 SVG 文件,它会自动将其转换为矢量:

您可以使用以下网站将 SVG 文件转换为可绘制矢量 link https://svg2vector.com/

Inkscape can save vectors to Android Vector Drawable using this extension,将格式添加到“另存为”对话框。