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

Question

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

但是，当我尝试在 Android Studio 中将其作为 Vector Asset 导入时，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>

Answer 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。

Answer 2

应该是 Android Studio 的错误：使用 Android Studio 集成的 SVG to XML 工具会导致此问题。

您可以使用其他像这样的SVG 到 XML 转换工具获取 XML 文件以获取 XML，然后将其粘贴到 XML。 它应该有效。