android – Vector Asset Studio is importing colorful .svg file as black and white-ThrowExceptions

Exception or error:

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:
enter image description here

This same file, is then read like this by the Vector Asset Studio:
enter image description here
enter image description here

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.

How to solve:

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

###

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.

Leave a Reply

Your email address will not be published. Required fields are marked *