Search code examples
androidxmlandroid-studiosvgvector-graphics

Error importing Vector Asset into Android Studio


I created a simple play-button image in Illustrator, saved it as a SVG, used an online SVG-to-Drawable converter to create an xml of the file, and then tried using Android Studio's Vector Asset tool to import the file into my project. However, when imported, one of the elements of the drawable is missing, in this case the white triangle in the middle of the circle.

play_circle.xml (the converted xml file)

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:viewportWidth="94"
    android:viewportHeight="102"
    android:width="94dp"
    android:height="102dp">
  <path
      android:pathData="M85 52.5A38.5 38.5 0 0 1 46.5 91 38.5 38.5 0 0 1 8        
52.5 38.5 38.5 0 0 1 46.5 14 38.5 38.5 0 0 1 85 52.5Z"
  android:strokeWidth="2"
  android:fillColor="#424900"
  android:strokeAlpha="0.29"
  android:fillAlpha="0.29"
  android:strokeColor="#000000"
  android:strokeMiterLimit="10" />
<path
  android:pathData="M71.39 51.63L34.81 30.51"
  android:fillColor="#ffffff" />
</vector>

play_button.svg, as created in illustrator and how it's intended to be

how it appears after being imported into android studio.Using Android Studio's Vector Asset Studio tool, you can see that the white triangle is already missing.


Solution

  • While converting png to svg there are some rules which we need to follow. All converters are not working fine. In my case, I found the best converter site which will give you preview image to confirm during conversion, which will ask for free registration and then you can download your svg file.

    Convert PNG to SVG - Which requires single sign up and allows only 2 tokens per day by single email

    Alternatives : Reference2 Reference3

    After generating svg,Use the following tool to convert your svg to vector drawable (It's necessary because somehow android studio is not able to import all the formats and style generated by random converters)

    Generate vector drawable from SVG

    I did the above steps for your image. and I created perfect vector drawable which you can directly copy to your drawable folder by creating new xml. (Tested by applying as source to imageview. Enjoy!)

    <?xml version="1.0" encoding="utf-8"?>
    <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="138dp"
    android:height="151dp"
    android:viewportWidth="138"
    android:viewportHeight="151">
    
    <path
        android:fillColor="#ffffff"
        android:pathData="M 0.00 0.00 L 136.94 0.00 C 136.87 48.67 136.95 97.33 136.88 146.00 C 137.12
    147.64 136.29 149.93 138.00 151.00 L 0.00 151.00 L 0.00 0.00 Z" />
       <path
        android:fillColor="#c7c9b7"
        android:pathData="M 136.94 0.00 L 138.00 0.00 L 138.00 151.00 L 138.00 151.00 C 136.29 149.93
        137.12 147.64 136.88 146.00 C 136.95 97.33 136.87 48.67 136.94 0.00 Z" />
    <path
        android:fillColor="#c7c9b7"
        android:pathData="M 60.36 18.50 C 77.71 16.46 95.72 22.52 108.36 34.56 C 120.55 46.19 127.59 63.12
        126.81 79.99 C 126.14 101.98 112.25 123.13 91.95 131.82 C 81.01 137.33 68.13
        138.47 56.13 136.23 C 37.74 133.08 21.41 120.27 13.46 103.43 C 7.33 90.93 6.03
        76.16 9.58 62.73 C 14.43 43.60 29.48 27.32 48.31 21.29 C 52.28 20.16 56.25 18.96
        60.36 18.50 Z" />
    <path
        android:fillColor="#ffffff"
        android:pathData="M 46.98 47.96 C 46.74 46.39 47.53 43.71 49.61 44.42 C 67.56 54.69 85.44 65.06
        103.33 75.43 C 104.44 75.89 105.51 76.60 105.76 77.86 C 105.26 78.65 104.62
        79.29 103.84 79.80 C 86.11 90.08 68.32 100.27 50.60 110.59 C 49.59 111.11 48.54
        111.11 47.46 110.58 C 47.35 110.18 47.12 109.38 47.01 108.98 C 46.95 88.64 47.03
        68.30 46.98 47.96 Z" />
     </vector>