skwear skwear - 27 days ago 12
Android Question

VectorDrawable renders differently in phone than in Android Studio

I have some stylized text that I have converted into SVG paths for use in a

. I directly extracted the path data as a string of text from the .svg file to use as the path data in the
. They look perfectly fine in the Android Studio design window but when I run it on my phone it looks messed up. My phone is a HTC One M8 and is running stock Marshmallow. I have attached two screen shots of how they differ.

rendered in Android Studio:

pathData rendered in Android Studio

rendered on phone:

enter image description here

Here is the
resource from the XML file

android:pathData="@string/anger_word" />

And here is the actual
, which is

What is happening here?

Thank you.


It may have been fixed now, but some initial versions of the VectorDrawable rendering code had some bugs parsing path data. IIRC especially with relative path commands. Relative path commands are the ones with lower case letters. Relative path commands seem to be the majority of the the commands in your path(s).

My advice would be to try converting the paths to use absolute path commands only (upper case letters). This may not be the problem, but it is something to try.

I don't know what editor you used to create your paths, but see if you can get it to output paths with absolute path commands.

If it can't, then you can search for a tool to do it. I believe Inkscape will do it. See the discussion in the following question. Note that it is primarily discussing the opposite conversion to what you need.

Is there a tool to convert SVG line paths from absolute to relative?

Also this question may be of help too.

Convert SVG Path to Absolute Commands