将矢量资源导入 Android Studio 时出错

Question

我在 Illustrator 中创建了一个简单的播放按钮图像，将其保存为 SVG，使用在线 SVG 到 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, as created in illustrator and how it's intended to be

how it appears after being imported into android studio.Using Android Studio's Vector Asset Studio tool, you can see that the white triangle is already missing.

Answer 1

在将 png 转换为 svg 时，我们需要遵循一些规则。所有转换器都无法正常工作。就我而言，我找到了最好的转换器网站，它会在转换过程中为您提供预览图像以进行确认，这将要求免费注册，然后您可以下载您的 svg 文件。

Convert PNG to SVG - 这需要单点注册并且每天只允许通过一封电子邮件发送 2 个令牌

备选方案： Reference2 Reference3

生成 svg 后，使用以下工具将您的 svg 转换为矢量可绘制对象（这是必要的，因为不知何故 android studio 无法导入随机转换器生成的所有格式和样式）

Generate vector drawable from SVG

我为你的图片做了以上步骤。我创建了完美的矢量绘图，您可以通过创建新的 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>

Answer 2

我无法让 Vector Asset Studio 理解我的任何资产。原因是我的系统是法语的。您需要它的英文版本，因为 , 与 svg 路径中的 . 不同，它会自动翻译成您系统的语言环境。尝试使您的系统运行成为英语语言环境（在 OS 级别 - 更改语言）

Answer 3

我是一名用户体验设计师，我遇到了同样的问题。经过大量的反复试验和 google 搜索后，我找到了解决方案。

在任何 adobe 平台中创建 SVG
移除所有阴影
确保长度和宽度也就是尺寸是整数而不是小数 (43.5 > 44)
确保笔划（如果您使用的是 XD）只是内笔划或外笔划，而不是中心笔划
将其导出为 SVG 并导入到 android 工作室，您应该会看到预览

PS：图像中的文本不起作用，但仍会导入。

将矢量资源导入 Android Studio 时出错

Error importing Vector Asset into Android Studio

xml

svg

android

vector-graphics

android-studio