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

【问题标题】：Error importing Vector Asset into Android Studio将矢量资源导入 Android Studio 时出错
【发布时间】：2017-01-29 04:16:48
【问题描述】：

我在 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, 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.

【问题讨论】：

你在drawable-v21中添加了这个xml吗？
是的。澄清一下，每当我在 Android Studio 中打开 Vector Asset Import 工具时，图像已经被弄乱了（中间没有显示白色三角形）。我想知道该工具是否存在错误
可以添加原始SVG文件吗？

标签： android xml android-studio svg vector-graphics

【解决方案1】：

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

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

替代方案： Reference2 Reference3

生成svg后，使用以下工具将你的svg转换为vector drawable（这是必要的，因为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>

【讨论】：

第一个链接不是免费应用[将PNG转换为SVG]
@Mehdi ：这是免费的兄弟！它需要单唱。是的，这个网站每天只允许通过一封电子邮件发送 2 个令牌。你可以试试这些：picsg.com 或 vectorizer.io
您第三次参考转换 PNG->SVG 有帮助：vectorizer.io 转换结果足够了。
第二个链接 VectorMagic 即使在“高质量”下也会呈现低质量的图像。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：