Photoshop Question posted in
The official user guide can be found here.

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

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.

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search