SVG文件和Android Studio矢量资产之间的不一致

Question

我正在使用Sketch软件构建svg图像以在我的android项目中使用.我遇到了这个问题:

正如您所看到的,图片还可以,我通过Chrome和Macos预览检查了预览.

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

填充的内部的减去的圆圈消失了.导入日志给我发消息:

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!

有谁知道我的导入发生了什么？

Answer 1

导入使用Inkscape制作的.svg文件时,我遇到了类似的问题.似乎Android Studio导入器不支持某些属性.

我发现最简单的方法是使用svg2android.不确定它如何处理Sketch .svg,但它似乎与Inkscape的文件有关.

如果其他人使用Inkscape,请不要忘记将文档大小设置为矢量大小"文件 - >文档属性...",或者直接使用文本编辑器在文件中进行编辑.

Answer 2

简短回答：取消组合您在 SVG 中的所有内容，确保您没有图层转换并重新保存。

长答案：每个笔划都有宽度，它是数字并在 SVG 中编码为

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

同时，每个斯托克都是一个对象，为了便于编辑，可以对对象进行分组。组也是对象，因此可以分组以便组可以具有嵌套组。最重要的是，组具有转换，当您在矢量编辑器中移动或缩放或旋转分组对象（例如路径）时创建这些转换，并在 SVG 中编码为

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

“transform”属性可以是“矩阵”，也可以是“旋转”或“平移”等线性变换序列，在这种情况下无关紧要。组的所有变换都应用于所有包含的对象属性。

因此组“变换”应用于包含的路径“笔画宽度”。

这正是 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>