Why does Android Asset Studio cut my vector images?

Question

In my app, I am using this image: https://pixabay.com/sv/plus-l%C3%A4gga-till-%C3%B6ka-ikon-knappen-1270001/

However, when I try to import it as a Vector Asset in Android Studio, the Asset Studio cuts it in the left and right edges so that it's not a full circle anymore. Why does this happen? How can I fix it? Do I have to modify the svg, or can I change some setting in Android Studio?

For me, it looks like

Here is the XML code of the SVG:

<?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>

And here is what the XML looks like of the Vector Drawable:

<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

This seems to be due to a bug in the Android Studio SVG import feature. It is not converting that <circle> element in the SVG properly.

Check out the example below. The original elements from the SVG are in green. I've converted the path elements from the VectorDrawable back to SVG paths and overlaid them on the original SVG. You can see that the circle path in red (from the VectorDrawable) doesn't match the original 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>

The fault is possibly exacerbated by the fact that the original SVG icon has been messily designed. It is full of coordinates with odd decimals and weird transforms.

I could fix the SVG for you, but I imagine you have multiple icons that possibly exhibit the same fault.

I was going to suggest you try one of the alternative online converters. But I just tried them and neither properly handles your SVG either. Perhaps you can try a different icon set, or try to recreate these ones in a vector editor, like Inkscape.