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

Question

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

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

是否有一种聪明的方法来进行转换,使分组树保持完整？

Answer 1

你试过Shape Shifter吗？它的意思是让你轻松动画矢量和svgs的程序,但你可以导入你的.svg并直接导出到Vector Drawable.它应该保持你的团队结构(但我没有做出任何承诺,因为我自己没有明确这样做).

Answer 2

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

• 右键单击应用程序文件夹->新矢量资产
• 选择单选按钮中的第二个选项以从本地文件创建矢量，如下图所示。
• 单击文件夹图标以加载本地SVG文件，它将自动将其转换为矢量：

Answer 3

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

Answer 4

创建一个空白的 xml 文件。写入除路径数据之外的 VectorDrawable 的所有属性。在写字板中打开 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>

注意：路径数据末尾的“z”被删除，并且我也手动重新排列了这些行以提高可读性。

通过这种方式，您必须一次手动将 SVG 转换为 xml。