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

4
我使用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的矢量素材工具,你可以看到白色三角形已经消失了。


你在drawable-v21文件夹中添加了这个xml吗? - Manish Jain
每当我在Android Studio中打开矢量资产导入工具时,图像就已经出现问题了(中间的白色三角形没有显示)。我想知道这个工具是否存在漏洞。 - Daniel Rust
你能添加原始的SVG文件吗? - kazhiu
3个回答

10

将png转换为svg需要遵循一些规则,不是所有的转换器都能正常工作。在我的情况下,我找到了最好的转换网站,在转换过程中会给您预览图像以确认,该网站要求免费注册,然后您就可以下载您的svg文件。

将PNG转换为SVG - 需要单个电子邮件每日使用2个令牌的单个登录

替代品: 参考2 参考3

生成svg后,请使用以下工具将其转换为矢量可绘制对象(这是必需的,因为某种原因,Android Studio无法导入由随机转换器生成的所有格式和样式)

从SVG生成矢量可绘制对象

我对您的图像执行了上述步骤,并创建了完美的矢量可绘制对象,您可以通过创建新的XML直接将其复制到drawable文件夹中(通过将其应用为图片视图的源进行测试。享受!)

<?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>

1
第一个链接不是免费应用程序 [将PNG转换为SVG] - Mehdi
@Mehdi:兄弟,这是免费的!只需要注册一次即可。是的,这个网站每天只允许一个电子邮件地址使用2个令牌。你可以尝试这些网站:picsvg.com或vectorizer.io。 - Jai
1
你提供的第三个PNG转SVG的参考链接非常有用:https://www.vectorizer.io/ 转换结果很满意。 - Michal Vician
第二个链接VectorMagic即使在“高质量”下也会呈现出糟糕的图像质量。 - Luis A. Florit

4

我是一名UX设计师,我曾经遇到过同样的问题。经过多次尝试和谷歌搜索,我找到了解决方案。

  1. 在任何Adobe平台上创建SVG

  2. 删除任何阴影

  3. 确保长度和宽度即尺寸为整数而不是小数(43.5 > 44)
  4. 如果你使用XD,则确保描边仅为内描边或外描边而不是中央描边
  5. 将其导出为SVG并导入到Android Studio中,你就应该可以看到预览了。

PS:图像中的文本无法工作,但仍然可以导入。


0

我无法让矢量资产工作室理解我的任何资产。原因是我的系统是法语的。你需要将其设置为英语,因为在SVG路径中,.不同,并且会自动翻译为您系统的语言环境。 尝试使您的系统运行在英语语言环境下(在操作系统级别更改语言)。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接