为什么 Android Asset Studio 会剪切我的矢量图像？答案

【问题标题】：Why does Android Asset Studio cut my vector images?为什么 Android Asset Studio 会剪切我的矢量图像？
【发布时间】：2018-04-06 07:34:09
【问题描述】：

在我的应用中，我使用的是这张图片：https://pixabay.com/sv/plus-l%C3%A4gga-till-%C3%B6ka-ikon-knappen-1270001/

但是，当我尝试在 Android Studio 中将其作为矢量资源导入时，Asset Studio 会在左右边缘切割它，使其不再是一个完整的圆圈。为什么会这样？我该如何解决？我必须修改 svg，还是可以更改 Android Studio 中的某些设置？

对我来说，它看起来像

这是 SVG 的 XML 代码：

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 35.876 35.876" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(-1.5317 -1015.4)">
  <circle transform="matrix(-.5 -.86603 .86603 -.5 0 0)" cx="-904.64" cy="-499.82" r="16.205" fill="none" stroke="#ff5e00" stroke-width="3.4773"/>
  <flowRoot fill="#000000" font-family="Sans" font-size="46.364px" letter-spacing="0px" word-spacing="0px" style="line-height:125%" xml:space="preserve"><flowRegion><rect x="-3.0977" y="-173.71" width="144.82" height="50.201"/></flowRegion><flowPara/></flowRoot>
  <rect transform="rotate(90)" x="1032" y="-27.666" width="2.7808" height="16.392" rx=".20089" ry=".20089" fill="#ff5e00"/>
 </g>
</svg>

下面是 Vector Drawable 的 XML 外观：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="35dp"
        android:height="35dp"
        android:viewportWidth="35.876"
        android:viewportHeight="35.876">
    <path
        android:pathData="M17.93,17.96m8.1,14.03a16.21,16.21 83.34,1 1,-16.2 -28.07a16.21,16.21 83.34,1 1,16.2 28.07"
        android:strokeColor="#ff5e00"
        android:fillColor="#00000000"
        android:strokeWidth="3.4773"/>
    <path
        android:fillColor="#FF000000"
        android:pathData="M-3.99,-1020.96h124.94v43.31h-124.94z"/>
    <path
        android:pathData="M16.75,9.8L19.13,9.8A0.2,0.2 0,0 1,19.33 10L19.33,25.99A0.2,0.2 0,0 1,19.13 26.19L16.75,26.19A0.2,0.2 0,0 1,16.55 25.99L16.55,10A0.2,0.2 0,0 1,16.75 9.8z"
        android:fillColor="#ff5e00"/>
    <path
        android:pathData="M26.13,16.8L26.13,19.18A0.2,0.2 101.89,0 1,25.93 19.38L9.94,19.38A0.2,0.2 102.72,0 1,9.74 19.18L9.74,16.8A0.2,0.2 102.72,0 1,9.94 16.6L25.93,16.6A0.2,0.2 101.89,0 1,26.13 16.8z"
        android:fillColor="#ff5e00"/>
</vector>

【问题讨论】：

如果没有看到 SVG，可能很难知道发生了什么。但我猜你不能发布它，因为它是一个商业产品。
“看到 SVG”是什么意思？你想要它的 XML 代码吗？
是的，我就是这个意思。
检查我编辑的问题
这就是 VectorDrawable XML。我指的是 SVG XML。

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

【解决方案1】：

这似乎是由于 Android Studio SVG 导入功能中的错误所致。它没有正确转换 SVG 中的 <circle> 元素。

查看下面的示例。 SVG 中的原始元素是绿色的。我已将 VectorDrawable 中的路径元素转换回 SVG 路径，并将它们覆盖在原始 SVG 上。您可以看到红色的圆圈路径（来自 VectorDrawable）与原始 SVG 不匹配。

<svg version="1.1" viewBox="0 0 35.876 35.876" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(-1.5317 -1015.4)">
  <circle transform="matrix(-.5 -.86603 .86603 -.5 0 0)" cx="-904.64" cy="-499.82" r="16.205" fill="none" stroke="#00ff00" stroke-width="3.4773"/>
  <rect transform="rotate(90)" x="1032" y="-27.666" width="2.7808" height="16.392" rx=".20089" ry=".20089" fill="#00ff00"/>
 </g>
 <g id="converted back from VectorDrawable">
   <path d="M17.93,17.96m8.1,14.03a16.21,16.21 83.34,1 1,-16.2 -28.07a16.21,16.21 83.34,1 1,16.2 28.07"
         fill="none" stroke="red" stroke-width="3.4773" stroke-opacity="0.3"/>
   <path d="M26.13,16.8L26.13,19.18A0.2,0.2 101.89,0 1,25.93 19.38L9.94,19.38A0.2,0.2 102.72,0 1,9.74 19.18L9.74,16.8A0.2,0.2 102.72,0 1,9.94 16.6L25.93,16.6A0.2,0.2 101.89,0 1,26.13 16.8z"
         fill="red" fill-opacity="0.5"/>
 </g>
</svg>

原始 SVG 图标设计混乱的事实可能会加剧错误。它充满了奇数小数和奇怪变换的坐标。

我可以为您修复 SVG，但我想您有多个图标可能会出现相同的错误。

我打算建议您尝试其中一种替代在线转换器。但我只是尝试过它们，也没有正确处理你的 SVG。也许您可以尝试不同的图标集，或者尝试在矢量编辑器中重新创建这些图标集，例如 Inkscape。

【讨论】：

感谢您的回答！首先，我认为在线获得免费的 SVG 会很容易，但现在我意识到创建自己的设计并尝试使用其中一个转换器进行转换可能会更容易。我也会试试 Inkscape
我已将此错误报告给 Android Studio 团队：issuetracker.google.com/issues/68302831

【解决方案2】：

应该是 Android Studio 的 bug：使用 Android Studio 集成的 SVG to XML 工具会导致这个问题。

您可以使用其他 SVG 到 XML 转换工具（例如 this）来获取 XML 文件，然后将其粘贴到 XML。它应该可以工作。

【讨论】：