Question

我在Illustrator中创建了一个简单的播放按钮图像，将其保存为SVG，使用在线SVG-to-Drawable转换器创建文件的xml，然后尝试使用Android Studio的矢量资产工具将文件导入我的项目。但是，导入时，缺少一个可绘制元素，在这种情况下，圆圈中间的白色三角形。

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转换为vector drawable（这是必要的，因为android studio无法导入随机转换器生成的所有格式和样式）

Generate vector drawable from SVG

我为您的图片执行了上述步骤。我创建了完美的矢量drawable，你可以通过创建新的xml直接复制到你的drawable文件夹。（通过将其作为源视图应用于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

我是用户体验设计师，但遇到了同样的问题。经过大量的试验和错误以及Google搜索，我找到了解决方案。

在任何Adobe平台中创建SVG
去除阴影
确保长度和宽度（即尺寸）是整数而不是小数（43.5> 44）
笔划（如果使用的是XD）确保仅是内部笔划或外部笔划，而不是中心笔划
将其导出到SVG并导入到android studio中，您应该会看到预览

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

Answer 3

在草图中创建矢量时，通常会出现此错误。 Here's an article关于如何修复它。

Answer 4

我无法通过矢量资产工作室理解我的任何资产。原因是我的系统是法语。您需要使用英语，因为,与svg路径中的.不同，它会自动转换为系统的语言环境。尝试使您的系统运行英语语言环境（在操作系统级别 - 更改语言）

将Vector Asset导入Android Studio时出错

4 个答案: