Error importing Vector Asset into Android Studio

Question

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.

yes. To clarify, whenever I open the Vector Asset Import tool in Android Studio, the image is already messed up (not showing the white triangle in the middle). I wonder if there is a bug with the tool — Daniel Rust, Sep 21 '16 at 04:52

Jai · Accepted Answer · 2018-04-12T07:30:50.730

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>

@Mehdi : It's free brother! It requires single sing up. Yeah this site only allow 2 tokens per day by single email.you could try these : picsvg.com or vectorizer.io — Jai, Apr 12 '18 at 07:28
Your 3rd reference to convert PNG->SVG helped: https://www.vectorizer.io/ The conversion result was sufficient. — Michal Vician, Apr 03 '19 at 09:32
The second link VectorMagic renders bad quality images even in "High quality". — Luis A. Florit, Nov 17 '21 at 23:22

score 4 · Answer 2 · answered Sep 19 '18 at 16:01

I am a UX designer and I had the same problem. After a lot of trial and error and google searches I found out a solution for this.

Create the SVG in any of the adobe platforms
Remove any shadows
make sure the length and the width aka the dimensions are in whole numbers and not decimals (43.5 > 44)
The stroke (if you are using XD) make sure is only inner stroke or outer stoke and not a center stroke
Export it to SVG and import into android studio and you should see a preview

PS: text in images wont work but will still import.

JPhi Denis · Answer 3 · 2018-01-15T16:57:34.480

0

I could't have any of my asset understood by vector asset studio. The reason is that my system was in french. You need it in english because , is different than . in the path of the svg and it is automatically translated in the locale of your system. Try to make your system run an english locale (at the OS level - change language)

edited Jan 15 '18 at 16:57

answered Jan 15 '18 at 16:42

JPhi Denis

335
5
5

Error importing Vector Asset into Android Studio

3 Answers3

Linked