Vector Asset Studio is importing colorful .svg file as black and white

Question

I'm using the instructions found here, from Google to use the new option (March 2016) to import .svg files into drawable instead of .png files.

The problem I have is that the file gets imported as black and white, even though the file has many colors.

Here's an image of the .svg file, as read by Google Chrome:

This same file, is then read like this by the Vector Asset Studio:

And in the app, the image shows up as black and white.

Any idea of why this is happening?

The .svg file is getting generated on Adobe PhotoShop Creative Cloud, and I'm using Android Studio 1.5.1 on Mac.

Thank you!

EDIT: added link to .svg file I'm using for this question.

Atrice

Does the image have external CSS? Does Vector Asst Studio support external CSS? – Blotter

Ummm. I don't know the answer to either question. This is coming to me from our design team. Any idea where I should have them check for the external css in Photoshop? – Atrice

Add the file to the question. – Blotter

There's no external CSS in that file. I don't know why it doesn't display, it should work. I suggest you take this up with Vector Asset Studio's bugtracker wherever that it. – Blotter

Answer 1

I also had the same problem but after digging internet finally found the solution, here it is:-

After getting done with illustrator designing

1) Go to File --> Save As ---> Window Dialog box Opens--> type name of svg --->Click Save

2) Now it shows SVG Options dialog box ---> At bottom left click More Options ---> In CSS Properties dropdown ---> Select Presentation Attributes

this setting makes svg compatible code for android import with colors !!

Sorry for making this answer elaborate ... did this for those who are beginners

Interval

This is the answer, everyone. Thanks, Vibhore. – Judiciary

Do you know how can I save the file on Inkscape? – Scramble

For those using "Export for Screens" in Illustrator (especially useful if you have many images to export), then you can achieve this by entering Advanced Settings (using the cog icon in the Export for Screen dialog), then under SVG, change "Styling" to "Inline Style". – Cymatium

Its works in Corel Draw too. the same option, select presentation attributes. thanks mate. – Doxology

Answer 2

Android Studio's SVG importer is somewhat limited. It only handles very simple SVG files. And I don't believe it supports the <style> element, or the class attribute. So you will need to change the CSS to XML properties.

For example:

<path class="st0" d="M163.3,10.8c2.4-0.5,6.2-0.9,10-0.9c5.5,0,9,0.9,11.6,3.1c2.2,1.6,3.5,4.1,3.5,7.5c0,4.1-2.7,7.7-7.2,9.3v0.1
    c4,1,8.7,4.3,8.7,10.6c0,3.6-1.4,6.4-3.6,8.5c-3,2.7-7.7,4-14.6,4c-3.8,0-6.7-0.3-8.5-0.5V10.8z M168.8,28.1h5c5.8,0,9.2-3,9.2-7.1
    c0-5-3.8-6.9-9.3-6.9c-2.5,0-4,0.2-4.8,0.4V28.1z M168.8,48.4c1.1,0.2,2.6,0.3,4.6,0.3c5.7,0,10.9-2.1,10.9-8.2
    c0-5.8-5-8.2-10.9-8.2h-4.5V48.4z"/>

Will need to be changed to:

<path fill="#007299" d="M163.3,10.8c2.4-0.5,6.2-0.9,10-0.9c5.5,0,9,0.9,11.6,3.1c2.2,1.6,3.5,4.1,3.5,7.5c0,4.1-2.7,7.7-7.2,9.3v0.1
    c4,1,8.7,4.3,8.7,10.6c0,3.6-1.4,6.4-3.6,8.5c-3,2.7-7.7,4-14.6,4c-3.8,0-6.7-0.3-8.5-0.5V10.8z M168.8,28.1h5c5.8,0,9.2-3,9.2-7.1
    c0-5-3.8-6.9-9.3-6.9c-2.5,0-4,0.2-4.8,0.4V28.1z M168.8,48.4c1.1,0.2,2.6,0.3,4.6,0.3c5.7,0,10.9-2.1,10.9-8.2
    c0-5.8-5-8.2-10.9-8.2h-4.5V48.4z"/>

Etcetera for the rest of the <path> elements.

Star

that is what I ended up doing, but it will obviously become a problem with more complex images that have even a few colors. Any idea if this works better on the beta of Android Studio 2.0? – Atrice

In Inkscape you can save as "Optimized SVG", which gives the option to convert CSS styles to XML properties. However it threw an error when I tried your file with it. – Star

Haha, nice! My only issue on that would be that we get the files from the marketing department, and they only use adobe CC stuff. This file was actually created on Illustrator. Yes, I could convert it in Inkscape, but if the colors change a bit (or anything else changes) then I'm kind of responsible for that, even though the marketing people gave us the correct images. – Atrice

My question got marked as duplicate for this but what about just black/white svg's being imported as all black? Same story? #36069772 – Sunbreak

Answer 3

It's so simple you can change your color directly from your svg xml after adding image to your project .

when you added image to your project; svg color must be like this :

android:fillColor="#000000"

just need to change to this :

android:fillColor="#b3ff856d"

just looking for android:fillColor

Casandracasanova