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

Question

在我的应用中，我使用的是这张图片：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>

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 到 XML 工具会导致此问题。

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

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

Why does Android Asset Studio cut my vector images?

svg

android

vector-graphics

android-assets

android-studio