SVG 路径转换为 Android Drawable 失败
SVG Path conversion to Android Drawable fails
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)
我创建了一个矢量可绘制对象,它按要求工作。使用 post 中附加的 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>
你的初始 svg 有问题,我用 illustrator 更新了它,无论如何这里是 xml for android
<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 右键单击 > 新建 > 矢量资产创建矢量断言,您可以直接导入 svg)
您可以使用 Inkscape (similar to what 修复此类损坏的 VectorDrawables,但是这里有完整的教程):
- 将 Android 可绘制对象的路径数据作为新路径添加到您的 Inkscape 文档
- 标记路径并点击
Path->Simplify
- 打开XML编辑器(Shift+Ctrl+X),select路径复制其属性"d"
的值
- 将 VectorDrawable 的路径数据替换为在上一步中复制的路径数据
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)
我创建了一个矢量可绘制对象,它按要求工作。使用 post 中附加的 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>
你的初始 svg 有问题,我用 illustrator 更新了它,无论如何这里是 xml for android
<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 右键单击 > 新建 > 矢量资产创建矢量断言,您可以直接导入 svg)
您可以使用 Inkscape (similar to what
- 将 Android 可绘制对象的路径数据作为新路径添加到您的 Inkscape 文档
- 标记路径并点击
Path->Simplify
- 打开XML编辑器(Shift+Ctrl+X),select路径复制其属性"d" 的值
- 将 VectorDrawable 的路径数据替换为在上一步中复制的路径数据