SVG文件与Android Studio矢量图资源不一致

19
我正在使用Sketch软件构建SVG图像,以在我的Android项目中使用。我遇到了一个问题:

enter image description here

您可以看到,图片很好,并且我使用Chrome和Macos预览进行了检查。

当我尝试在Android Studio中导入SVG时,导入预览如下:

enter image description here

填充圆内的减去的圆已经消失。导入日志向我显示了以下信息:

In ic_percent.svg:
WARNING@ line 10 We don't scale the stroke width!
WARNING@ line 11 We don't scale the stroke width!
WARNING@ line 12 We don't scale the stroke width!
WARNING@ line 13 We don't scale the stroke width!

有人知道我的导入出了什么问题吗?


你有找到解决方案吗? - lfal
现在我完全放弃了,只是针对这个特定的资产使用mipmaps,但是我真的很想知道我为什么会出现这种奇怪的行为。 - Felipe Jun
我向设计师寻求帮助,他在Illustrator或类似软件中选择了所有内容,右键点击所选内容并选择取消组合,然后删除了蒙版层,最后将整个内容重新组合。现在它对我有效了。 - lfal
也许这会对你有所帮助,这是在Sketch中正确导出SVG文件的方法:https://medium.com/sketch-app-sources/exploring-ways-to-export-clean-svg-icons-with-sketch-the-correct-way-752e73ec4694#.2v2f7myj8 - Dang Nguyen Huu
6个回答

9
我曾在导入使用Inkscape制作的.svg文件时遇到类似问题。似乎Android Studio导入器不支持某些属性。
最简单的方法是使用svg2android。不确定它如何处理Sketch .svg,但似乎对来自Inkscape的文件起作用。
如果其他人使用Inkscape,请不要忘记将文档大小设置为矢量大小“文件->文档属性...”或直接在文件中使用文本编辑器进行编辑。

如何使用现在?我尝试获取输出代码并保存为.svg并使用它,但是Studio显示它无效。 - Henrique Bruno
1
如果您正在使用Inkscape,请点击“保存副本”,然后选择“优化的SVG”。当您单击“保存”时,请确保选中“折叠组”并取消选中“为相似属性创建组”。 - MkSMC
FYI,这并没有解决 Android 不支持 stroke-dasharray XML 属性的类似问题。 - TahoeWolverine

8

简短回答: 将SVG中的所有内容取消分组,确保没有层面的变换,然后重新保存。

详细回答: 每个描边都有宽度,用数字表示并编码在SVG中。

<path style="...;stroke-width=1.5;...">

同时,每一笔的描绘都是一个对象,可以将多个对象组合在一起以便于编辑。组合也是一个对象,因此可以将组合嵌套成为更深层次的组合。

最重要的是,组合有转换功能。当您在矢量编辑器中移动、缩放或旋转组合对象(例如路径)时,会生成转换,并在SVG中进行编码。

<g transform="...">
  <path .../>
  <path .../>
  <some other object .../>
</g>

“transform”属性可以是“matrix”,也可以是包含“rotate”或“translate”等线性变换序列,但在这种情况下并不重要。组的所有变换都应用于所有包含的对象属性。
因此,组“transform”适用于包含的路径“stroke-width”。
这正是Android Studio不支持的地方。
解决方案很简单:取消所有组合,并强制矢量编辑器将变换应用于真实的几何对象。然后再次导出。
结果文件中仍然会有组,这是可以接受的-这是存储SVG中图层的唯一方法。只需确保文件中的图层没有应用变换即可。大多数情况下,您不必为此做任何事情,因为绝大多数矢量编辑器只能对它们产生视觉效果而不是几何效果。
就是这样。
以下是一个非常简单的文件示例,它将破坏Android Studio的导入。这只是两个随机笔画,通过鼠标缩放并分组:
<g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <g
       id="g821"
       transform="matrix(0.74621726,0,0,1.3160501,48.238048,-10.434556)">
      <path
         inkscape:connector-curvature="0"
         id="path815"
         d="m 58.964284,69.458334 31.75,-5.291667"
         style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
      <path
         inkscape:connector-curvature="0"
         id="path817"
         d="M 77.863093,95.160713 112.6369,77.017855"
         style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    </g>

取消组合后适用于Android Studio的相同代码片段。
<g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <path
       style="fill:none;stroke:#000000;stroke-width:0.26219916px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 92.238214,80.976091 115.93061,74.011993"
       id="path815"
       inkscape:connector-curvature="0" />
    <path
       style="fill:none;stroke:#000000;stroke-width:0.26219916px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 106.34083,114.80171 132.28965,90.9248"
       id="path817"
       inkscape:connector-curvature="0" />
  </g>

这解释了问题的原因及其解决方法,应该被接受为答案。 - XME

3
以下是翻译的结果:

操作步骤如下:

  1. 在Sketch中打开您的 .svg 文件。
  2. 在页面列表中选择缺失的圆圈。在我的案例中,它看起来像这样。

页面列表

  1. 点击“填充”(齿轮形状图标)并将“Even-Odd”改为“Non-Zero”。

填充

  1. 打开层菜单 -> 路径 -> 逆序排列。

逆序排列

  1. 将形状导出回 .svg 格式。

导出

  1. 将 .svg 转换为矢量可绘制(从Android Studio或第三方工具中)。

就这样了!感谢 @dineshbob medium 博客的贡献。


3
有人叫我吗? :D - Bob
是的,我是,@Bob写得很棒! - aldok
感谢,@aldok. :) - Bob
从Figma导出的SVG也遇到了同样的问题。反转内部形状的顺序解决了问题。谢谢! - mikehc

1
在Inkscape中,您可以选择使用笔画宽度的线条等内容,并在保存为sgv之前将其转换为路径:

enter image description here


0

当我以svg格式导出矢量图形时,我遇到了同样的问题。但是,当导入矢量图形时,Android Studio也可以处理psd文件格式。在导出期间将文件格式设置为psd后,我成功地将其导入到Android Studio中。


-1

我在使用inkscape时遇到了同样的问题。不确定是否适用于Sketch,但尝试很简单。

只需启动新的Sketch项目并将先前项目的向量粘贴即可。这解决了我在Inkscape上遇到的相同问题。似乎在创建图片时使用了一些额外的属性,在Android的导入工具中不被接受。


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