将VectorDrawable转换为SVG

Question

我曾手动或使用Web工具将SVG转换为VectorDrawable，但我现在遇到了麻烦。我有一个VectorDrawable，但不确定如何将其转换为SVG，并且找不到任何在线工具来完成这项工作。

是否有人有此经验，可以分享一下具体步骤或工具？

- sandalone

Answer 1

我遵循的步骤：

android:pathData 替换为 d

android:fillColor 替换为 fill

android:strokeColor 替换为 stroke

android:strokeWidth 替换为 stroke-width

android:fillType 替换为 fill-rule

在VectorDrawable中，没有 fillColor 的路径在SVG中为 fill="none"。

android:viewportHeight="24" android:viewportWidth="24" 在SVG中为 viewBox="0 0 24 24"。

示例

矢量图

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24"
    android:viewportWidth="24">

    <path
        android:fillColor="#ffffff"
        android:pathData="M12,3L2,12h3v8h2.5v-0.8c0-1.5,3-2.2,4.5-2.2s4.5,0.8,4.5,2.2V20H19v-8h3L12,3zM12,15.2c1.2,0-2.2-1-2.2-2.2 s1-2.2,2.2-2.2s2.2,1,2.2,2.2S13.2,15.2,12,15.2z" />
    <path android:pathData="M0,0h24v24H0V0z" />
</vector>

可缩放矢量图形（SVG）

<svg xmlns="http://www.w3.org/2000/svg"
    width="24" 
    height="24" 
    viewBox="0 0 24 24" >

    <path 
        fill="#ffffff"
        d="M12,3L2,12h3v8h2.5v-0.8c0-1.5,3-2.2,4.5-2.2s4.5,0.8,4.5,2.2V20H19v8h3L12,3zM12,15.2c1.2,0-2.2-1-2.2-2.2 s1-2.2,2.2-2.2s2.2,1,2.2,2.2S13.2,15.2,12,15.2z" />
    <path d="M0,0h24v24H0V0z" fill="none"/>
</svg>

- Kuti Gbolahan

---

那真是太有帮助了，但我认为你的SVG缺少闭合标签。否则似乎无法验证或在Illustrator中打开。 - Aonghus Shortt

"FF000000" 这种颜色无法使用，应更改为 "000000"。 - Trần Thị Diệu My

列表中的另一个：在SVG中，android <group>标签是<g>，如果您想处理android:translateX或android:translateY，则需要使用transform="translate()"属性代替。 - NickGlowsinDark

https://www.joydeepdeb.com/tools/find-replace.html可能对这个解决方案有帮助。 - Shikhar

android:fillAlpha 是 fill-opacity。来源：https://dev59.com/jW025IYBdhLWcg3wX070#6042577 - Tamás Sengel

Answer 2

VectorDrawable格式与SVG非常相似。

您可以在此处找到关于VectorDrawable格式的文档，以及在此处找到关于SVG格式的文档。

我刚写了这个Python脚本，它可以将矢量可绘制的XML文件转换为SVG。它并不涵盖所有矢量可绘制属性，但可以处理最常见的一些属性。您只需将XML文件拖放到脚本上，文件就会被转换。

- Hyperion

---

这是针对Linux的吗？不要丢弃任何东西。 - user5698345

@СергейГрушин 我在Windows上尝试了这个脚本，但它也应该在Linux上工作。你应该检查一下控制台是否有错误。也许xml模块没有安装？如果是这种情况，你应该运行pip install xml。 - Hyperion

脚本仅在命令行中运行。谢谢。但我想要拖放功能，所以我创建了一个桌面快捷方式，其中包含“Exec=python /opt/utils/xml2svg.py %U”。现在我可以将文件拖放到桌面快捷方式上 :) 另外，我还编辑了两个内容：现在脚本在转换后会删除源xml文件，svg文件名不再带有“.xml”前缀扩展名。 - user5698345

FYI，@Hyperion，我复制了你的存储库并添加了更好地处理颜色的功能：https://github.com/RohanTalip/VectorDrawable2Svg。 - Rohan Talip

感谢提供 Python 脚本！ - ingh.am

我只是制作了一个非常简单的网站来做这个。https://vd.floo.app/ - Seanghay