将Vector Asset导入Android Studio时出错 [英] Error importing Vector Asset into Android Studio
问题描述
我在Illustrator中创建了一个简单的播放按钮图像，将其保存为SVG，使用在线SVG-to-Drawable转换器创建文件的xml，然后尝试使用Android Studio的Vector Asset工具导入文件进入我的项目.但是，在导入时，drawable的元素之一丢失了，在这种情况下，圆中间的白色三角形成为了现实.
play_circle.xml(转换后的xml文件)
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportWidth="94"
android:viewportHeight="102"
android:width="94dp"
android:height="102dp">
<path
android:pathData="M85 52.5A38.5 38.5 0 0 1 46.5 91 38.5 38.5 0 0 1 8
52.5 38.5 38.5 0 0 1 46.5 14 38.5 38.5 0 0 1 85 52.5Z"
android:strokeWidth="2"
android:fillColor="#424900"
android:strokeAlpha="0.29"
android:fillAlpha="0.29"
android:strokeColor="#000000"
android:strokeMiterLimit="10" />
<path
android:pathData="M71.39 51.63L34.81 30.51"
android:fillColor="#ffffff" />
</vector>
play_button.svg，它是在illustrator中创建的，以及它的意图
导入到android studio后的外观.使用Android Studio的Vector Asset Studio工具，您可以看到白色三角形已经不见了.
将png转换为svg时，需要遵循一些规则.所有转换器工作不正常.就我而言，我找到了最好的转换器站点，该站点将为您提供预览图像以在转换期间进行确认，这将要求免费注册，然后您可以下载svg文件.
将PNG转换为SVG -这需要一次注册，并且每天仅通过一封电子邮件仅允许2个令牌 >
生成svg之后，使用以下工具将svg转换为可绘制的矢量(这是必要的，因为android studio无法导入随机转换器生成的所有格式和样式)
我为您的图片执行了上述步骤.并且我创建了完美的矢量可绘制对象，您可以通过创建新的xml将其直接复制到您的可绘制文件夹中. (通过将其用作imageview的源进行了测试.尽情享受吧！)
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="138dp"
android:height="151dp"
android:viewportWidth="138"
android:viewportHeight="151">
<path
android:fillColor="#ffffff"
android:pathData="M 0.00 0.00 L 136.94 0.00 C 136.87 48.67 136.95 97.33 136.88 146.00 C 137.12
147.64 136.29 149.93 138.00 151.00 L 0.00 151.00 L 0.00 0.00 Z" />
<path
android:fillColor="#c7c9b7"
android:pathData="M 136.94 0.00 L 138.00 0.00 L 138.00 151.00 L 138.00 151.00 C 136.29 149.93
137.12 147.64 136.88 146.00 C 136.95 97.33 136.87 48.67 136.94 0.00 Z" />
<path
android:fillColor="#c7c9b7"
android:pathData="M 60.36 18.50 C 77.71 16.46 95.72 22.52 108.36 34.56 C 120.55 46.19 127.59 63.12
126.81 79.99 C 126.14 101.98 112.25 123.13 91.95 131.82 C 81.01 137.33 68.13
138.47 56.13 136.23 C 37.74 133.08 21.41 120.27 13.46 103.43 C 7.33 90.93 6.03
76.16 9.58 62.73 C 14.43 43.60 29.48 27.32 48.31 21.29 C 52.28 20.16 56.25 18.96
60.36 18.50 Z" />
<path
android:fillColor="#ffffff"
android:pathData="M 46.98 47.96 C 46.74 46.39 47.53 43.71 49.61 44.42 C 67.56 54.69 85.44 65.06
103.33 75.43 C 104.44 75.89 105.51 76.60 105.76 77.86 C 105.26 78.65 104.62
79.29 103.84 79.80 C 86.11 90.08 68.32 100.27 50.60 110.59 C 49.59 111.11 48.54
111.11 47.46 110.58 C 47.35 110.18 47.12 109.38 47.01 108.98 C 46.95 88.64 47.03
68.30 46.98 47.96 Z" />
</vector>
I created a simple play-button image in Illustrator, saved it as a SVG, used an online SVG-to-Drawable converter to create an xml of the file, and then tried using Android Studio's Vector Asset tool to import the file into my project. However, when imported, one of the elements of the drawable is missing, in this case the white triangle in the middle of the circle.
play_circle.xml (the converted xml file)
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportWidth="94"
android:viewportHeight="102"
android:width="94dp"
android:height="102dp">
<path
android:pathData="M85 52.5A38.5 38.5 0 0 1 46.5 91 38.5 38.5 0 0 1 8
52.5 38.5 38.5 0 0 1 46.5 14 38.5 38.5 0 0 1 85 52.5Z"
android:strokeWidth="2"
android:fillColor="#424900"
android:strokeAlpha="0.29"
android:fillAlpha="0.29"
android:strokeColor="#000000"
android:strokeMiterLimit="10" />
<path
android:pathData="M71.39 51.63L34.81 30.51"
android:fillColor="#ffffff" />
</vector>
play_button.svg, as created in illustrator and how it's intended to be
While converting png to svg there are some rules which we need to follow. All converters are not working fine. In my case, I found the best converter site which will give you preview image to confirm during conversion, which will ask for free registration and then you can download your svg file.
Convert PNG to SVG - Which requires single sign up and allows only 2 tokens per day by single email
Alternatives : Reference2 Reference3
After generating svg,Use the following tool to convert your svg to vector drawable (It's necessary because somehow android studio is not able to import all the formats and style generated by random converters)
Generate vector drawable from SVG
I did the above steps for your image. and I created perfect vector drawable which you can directly copy to your drawable folder by creating new xml. (Tested by applying as source to imageview. Enjoy!)
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="138dp"
android:height="151dp"
android:viewportWidth="138"
android:viewportHeight="151">
<path
android:fillColor="#ffffff"
android:pathData="M 0.00 0.00 L 136.94 0.00 C 136.87 48.67 136.95 97.33 136.88 146.00 C 137.12
147.64 136.29 149.93 138.00 151.00 L 0.00 151.00 L 0.00 0.00 Z" />
<path
android:fillColor="#c7c9b7"
android:pathData="M 136.94 0.00 L 138.00 0.00 L 138.00 151.00 L 138.00 151.00 C 136.29 149.93
137.12 147.64 136.88 146.00 C 136.95 97.33 136.87 48.67 136.94 0.00 Z" />
<path
android:fillColor="#c7c9b7"
android:pathData="M 60.36 18.50 C 77.71 16.46 95.72 22.52 108.36 34.56 C 120.55 46.19 127.59 63.12
126.81 79.99 C 126.14 101.98 112.25 123.13 91.95 131.82 C 81.01 137.33 68.13
138.47 56.13 136.23 C 37.74 133.08 21.41 120.27 13.46 103.43 C 7.33 90.93 6.03
76.16 9.58 62.73 C 14.43 43.60 29.48 27.32 48.31 21.29 C 52.28 20.16 56.25 18.96
60.36 18.50 Z" />
<path
android:fillColor="#ffffff"
android:pathData="M 46.98 47.96 C 46.74 46.39 47.53 43.71 49.61 44.42 C 67.56 54.69 85.44 65.06
103.33 75.43 C 104.44 75.89 105.51 76.60 105.76 77.86 C 105.26 78.65 104.62
79.29 103.84 79.80 C 86.11 90.08 68.32 100.27 50.60 110.59 C 49.59 111.11 48.54
111.11 47.46 110.58 C 47.35 110.18 47.12 109.38 47.01 108.98 C 46.95 88.64 47.03
68.30 46.98 47.96 Z" />
</vector>
这篇关于将Vector Asset导入Android Studio时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
