SVG 路径转换为 Android Drawable 失败答案

【问题标题】：SVG Path conversion to Android Drawable failsSVG 路径转换为 Android Drawable 失败
【发布时间】：2016-07-07 15:58:28
【问题描述】：

svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   width="382"
   height="350"
   id="svg2"
   version="1.1">
  <path
     style="fill:#000000;fill-opacity:1;fill-rule:nonzero"
     d="M 190.46289,1.9140625 A 77.437241,77.375557 89.625608 0 0 113.5957,79.855469 77.437241,77.375557 89.625608 0 0 113.7832,84.326172 77.437241,77.375557 89.625608 0 0 80.462891,76.914062 77.437241,77.375557 89.625608 0 0 3.5957031,154.85547 77.437241,77.375557 89.625608 0 0 60.125,228.85742 a 77.437241,77.375557 89.625608 0 0 -11.529297,40.99805 77.437241,77.375557 89.625608 0 0 77.880857,76.92969 77.437241,77.375557 89.625608 0 0 64.4668,-35.50196 77.437241,77.375557 89.625608 0 0 65.5332,35.50196 77.437241,77.375557 89.625608 0 0 76.86719,-77.94141 77.437241,77.375557 89.625608 0 0 -10.49805,-38.25 77.437241,77.375557 89.625608 0 0 55.49805,-74.75 77.437241,77.375557 89.625608 0 0 -77.88086,-76.929688 77.437241,77.375557 89.625608 0 0 -32.44727,7.470704 77.437241,77.375557 89.625608 0 0 0.32813,-7.541016 A 77.437241,77.375557 89.625608 0 0 190.46289,1.9140625 Z M 105.5,98.5 l 170,0 c 8.31,0 15,6.69 15,15 l 0,126 c 0,8.31 -6.69,15 -15,15 l -101.05859,0 -72.81446,35.29688 L 130.59961,254.5 105.5,254.5 c -0.84458,0 -1.66687,-0.0859 -2.47266,-0.21875 l -1.72265,0.002 0,-0.38476 C 95.051207,252.09077 90.5,246.35121 90.5,239.5 l 0,-126 c 0,-8.31 6.69,-15 15,-15 z"
     id="svg_6" />
</svg>

在所有经过测试的浏览器和 Inkscape 中看起来像这样：

如果我使用awesome svg2android tool 转换它，我会得到 xml 文件

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

    <path
        android:fillColor="#000000"
        android:pathData="M 190.46289,1.9140625 A 77.437241,77.375557 89.625608 0 0 113.5957,79.855469
77.437241,77.375557 89.625608 0 0 113.7832,84.326172 77.437241,77.375557
89.625608 0 0 80.462891,76.914062 77.437241,77.375557 89.625608 0 0
3.5957031,154.85547 77.437241,77.375557 89.625608 0 0 60.125,228.85742 a
77.437241,77.375557 89.625608 0 0 -11.529297,40.99805 77.437241,77.375557
89.625608 0 0 77.880857,76.92969 77.437241,77.375557 89.625608 0 0
64.4668,-35.50196 77.437241,77.375557 89.625608 0 0 65.5332,35.50196
77.437241,77.375557 89.625608 0 0 76.86719,-77.94141 77.437241,77.375557
89.625608 0 0 -10.49805,-38.25 77.437241,77.375557 89.625608 0 0 55.49805,-74.75
77.437241,77.375557 89.625608 0 0 -77.88086,-76.929688 77.437241,77.375557
89.625608 0 0 -32.44727,7.470704 77.437241,77.375557 89.625608 0 0
0.32813,-7.541016 A 77.437241,77.375557 89.625608 0 0 190.46289,1.9140625 Z M
105.5,98.5 l 170,0 c 8.31,0 15,6.69 15,15 l 0,126 c 0,8.31 -6.69,15 -15,15 l
-101.05859,0 -72.81446,35.29688 L 130.59961,254.5 105.5,254.5 c -0.84458,0
-1.66687,-0.0859 -2.47266,-0.21875 l -1.72265,0.002 0,-0.38476 C
95.051207,252.09077 90.5,246.35121 90.5,239.5 l 0,-126 c 0,-8.31 6.69,-15 15,-15
z" />
</vector>

在 Android Studio 预览版中如下所示：

我无法发现路径数据中的错误。你可以吗？（我还将 svg 路径数据直接复制到产生相同渲染的 xml 中）

【问题讨论】：

你不说应用运行时看起来好不好。 IE。只是 Android Studio 中的预览没有正确呈现吗？我同意这两个路径定义看起来相同。
我手机上的预览和渲染都不正确，而 Lary 的 svg 确实有效，但不清楚原因

标签： android svg android-vectordrawable

【解决方案1】：

你的初始 svg 有问题，我用 illustrator 更新了它，反正这里是 android 的 xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="374dp"
        android:height="344dp"
        android:viewportWidth="374.751"
        android:viewportHeight="344.874">
    <path
        android:fillColor="#FF000000"
        android:pathData="M186.9,0c-42.7,0.3 -77.1,35.2 -76.9,77.9c0,1.5 0.1,3 0.2,4.5c-10.4,-4.9 -21.8,-7.5 -33.3,-7.4c-42.7,0.3 -77.1,35.2 -76.9,77.9c0.3,34.5 23.3,64.7 56.5,74c-7.6,12.3 -11.6,26.5 -11.5,41c0.3,42.8 35.1,77.2 77.9,76.9c0,0 0,0 0,0c26.1,-0.2 50.3,-13.5 64.5,-35.5c14.3,22.3 39.1,35.7 65.5,35.5c42.7,-0.3 77.1,-35.2 76.9,-77.9c-0.1,-13.4 -3.7,-26.6 -10.5,-38.3c33.1,-9.8 55.7,-40.2 55.5,-74.8c-0.3,-42.8 -35.1,-77.2 -77.9,-76.9c0,0 0,0 -0,0c-11.2,0.1 -22.3,2.7 -32.4,7.5c0.2,-2.5 0.3,-5 0.3,-7.5C264.5,34.2 229.6,-0.3 186.9,0C186.9,0 186.9,0 186.9,0zM101.9,96.6h170c8.3,0 15,6.7 15,15v126c0,8.3 -6.7,15 -15,15H170.8l-72.8,35.3l29,-35.3h-25.1c-0.8,0 -1.7,-0.1 -2.5,-0.2l-1.7,0v-0.4c-6.3,-1.8 -10.8,-7.5 -10.8,-14.4v-126C86.9,103.3 93.6,96.6 101.9,96.6z"/>
</vector>

（另一方面，您现在可以使用 android studio 右键单击 >new > 矢量资产创建矢量断言，并且您可以导入 svg 直接）

【讨论】：

您解决的“问题”是什么？原作表面上没有任何问题。不解释您所做的更改对 OP 或其他查看此问题的人没有帮助。
我其实不知道..我尝试使用 android sudio 矢量资产工具将 PhilLab svg 添加到一个 android 项目中，我得到了与他相同的结果（在构建应用程序时，svg 格式错误），然后我在 illustrator 中打开了 svg，将其重新导出为 svg，然后在 android 项目中重新导入它，这次它工作正常......因为结果在那里，我认为无论如何发布它都会对 PhilLab 有所帮助。
@LaryCiminera 感谢您提供正确的 svg，尤其是 Android Studio 更新提示！让我们看看我们是否能找出错误的原因 - 我会暂时保留这个问题
如果是这种情况，那么 Android 和 AS 在解释某些路径定义字符串的方式上似乎存在错误。您应该在 Android 错误跟踪器上报告它。 code.google.com/p/android/issues/list

【解决方案2】：

我创建了一个矢量可绘制对象，它可以根据要求工作。使用帖子中附加的 jpg 图像并使用网站http://image.online-convert.com/convert-to-svg 将其转换为 svg。然后我使用该 svg 并在 Android Studio 中创建了一个新的 Vector 资产。它工作正常。

试试下面的代码

<vector android:height="24dp" android:viewportHeight="364.0"
    android:viewportWidth="386.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#000000" android:strokeColor="#00000000"
        android:pathData="M178,2.6c-7.9,1.6 -17.9,4.8 -23.8,7.8 -24.9,12.5 -42.1,39.7 -42.2,66.3 0,
        4 -0.2,7.3 -0.5,7.3 -0.2,0 -2.7,-0.9 -5.4,-2 -18.6,-7.3 -43.1,-6.1 -60.9,2.9 -12.6,
        6.4 -23.2,15.8 -30.7,27.1 -20.3,30.7 -15.6,72.7 11.2,98.1 8.8,8.4 17.6,13.6 30.5,
        18.2 1.6,0.6 1.4,1.4 -1.7,7.9 -5.9,12.4 -7.8,22.2 -7.2,36.3 0.8,20 7.5,35.9 20.9,
        50.1 15.6,16.4 39.1,25.7 60.3,23.9 24.2,-2.1 44.2,-13.1 58.3,-32l2.2,-3 2.2,3c3.9,
        5.4 15.4,16.3 21.2,20 25.5,16.3 59.1,16.1 84.1,-0.6 31.7,-21.2 43.4,-62.7 27.5,-96.8 -1.7,
        -3.5 -2.9,-6.5 -2.8,-6.6 0.2,-0.1 3.1,-1.2 6.5,-2.4 16.3,-6 31.9,-20.5 40.2,
        -37.4 6,-12.3 8.1,-21.3 8.1,-34.4 -0.1,-41.5 -31.4,-74.5 -73,-77 -10.4,-0.6 -22,1.1 -31.1,
        4.7 -2.7,1.1 -5.2,2 -5.4,2 -0.3,0 -0.5,-3.7 -0.5,-8.3 -0.1,-33.2 -22.9,-62.8 -56,-72.7 -7.4,
        -2.2 -25.8,-3.6 -32,-2.4zM281,100.7c1.9,1.2 4.4,3.7 5.5,5.5 1.9,3.2 2,5.1 2,70.3 0,
        65.2 -0.1,67.1 -2,70.3 -1.1,1.8 -3.6,4.3 -5.5,5.5 -3.5,2.2 -4.2,2.2 -57.5,2.7l-54,0.5 -28,
        13.9c-33.9,16.7 -40.8,19.9 -39.9,18.3 0.4,-0.6 6.4,-8.1 13.3,-16.5 6.9,-8.4 12.7,-15.7 12.9,
        -16.1 0.2,-0.5 -4.1,-0.7 -9.4,-0.4 -5.3,0.3 -12.2,0.2 -15.3,-0.2 -4.8,-0.6 -6.2,-1.3 -9.7,
        -4.9 -3.6,-3.5 -4.3,-4.9 -4.9,-9.6 -0.3,-3 -0.5,-33.6 -0.3,-68 0.3,-62.3 0.3,-62.5 2.5,-66 2.6,
        -4.1 5.5,-6.1 10.3,-7.1 1.9,-0.4 42.4,-0.6 90,-0.6l86.5,0.2 3.5,2.2z"
    />
</vector>

【讨论】：

你是如何创建 VectorDrawable 的？您的回答，没有进一步的信息，并不能真正帮助 OP 或其他有类似问题的人。
可惜上下左右的圆圈被剪掉了一点但是

【解决方案3】：

您可以使用 Inkscape 修复此类损坏的 VectorDrawables（类似于 Lary 所做的，但这里有完整的教程）：

将 Android drawable 中的路径数据添加为 Inkscape 文档的新路径
标记路径并点击Path->Simplify
打开 XML 编辑器 (Shift+Ctrl+X)，选择路径并复制其属性“d”的值
将 VectorDrawable 的 pathData 替换为上一步中复制的路径数据

【讨论】：