VectorDrawable rendering issue

Question

I\'m having problems with the VectorDrawables introduced by the support library.

Looking around, I read about similar issues regarding bad scaling or incorrect preview i

Answer 1

Solution

After some more tries (and help from people), I've found the problem. The problem was with the fill-rule as other already experienced, but in the opposite way!

In fact, as far as I know, VectorDrawable uses the non-zero fill-rule and has rendering problems with SVGs exported with the evenodd rule. That's why I've always used the non-zero rule. Turns out that using the android:fillType="evenOdd" one solves my problem.

I don't know why, and at this point I'm too afraid to ask.

Answer 2

In my case nothing helped until I replaced all elliptical arc commands (A) with cubic Bézier curve commands (C). Any arc could be represented with one or several Bézier curves. The whole ellipse may be replaced with four Bézier curves.

Inkscape tends to convert arcs to Bézier curves once you start editing the path in SVG, so you can use Inkscape for conversion. It looks like Android vector renderer has a serious issues in processing A/a commands, doesn't matter if they are relative or absolute. So, just try to convert A/a => C/c.

Note that it is not enough to change command letter, you need to set control points appropriately.

Answer 3

I suspect it is to do with path command parsing. If we look at the first subpath of your path (which is the one not being draw correctly), it looks like the following:

M 471.8, 374.4
a 54.7, 54.7 0, 0 0, -4.2 -3.8,
  248.3 248.3, 0 0, 0 31.3,-121.5
c -0.2, -138.7 -114.7, -251.1 -253.4, -249
  -134.7, 2.1 -243.5, 110.9 -245.5, 245.6
a 249.5, 249.5 0, 0 0, 390.6 209.5
l 0.2, 0.2
  155.1, 155.1
  81, -81Z

I've broken it down for readability.

You can see that it is using one of the features of SVG paths command strings, where if a path command is repeated, you can skip it and just provide the coordinates. It's doing it here for the a (arc), c (curve) and l (line) commands.

While the line segments (forming the handle) seem to be rendering okay, I suspect that the VectorDrawable renderer is not parsing the arc and/or the curve segments properly. However I haven't looked at the Android codebase to confirm the bug.

I would suggest you try putting the skipped path command characters back in to the path, to see if it works better. For example:

M 471.8, 374.4
a 54.7, 54.7 0, 0 0, -4.2 -3.8
a 248.3 248.3, 0 0, 0 31.3,-121.5
c -0.2, -138.7 -114.7, -251.1 -253.4, -249
c -134.7, 2.1 -243.5, 110.9 -245.5, 245.6
a 249.5, 249.5 0, 0 0, 390.6 209.5
l 0.2, 0.2
  155.1, 155.1
  81, -81Z

There is another sub-path later in the string (corresponding to one of the "pills"), that also uses the repeated coords shortcut. If we modify that also, the resulting VectorDrawable looks like:

<vector android:height="24dp" android:viewportHeight="610.53"
android:viewportWidth="626.96" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FF000000" android:pathData="M471.8,374.4a54.7,54.7 0,0 0,-4.2 -3.8a248.3 248.3,0 0,0 31.3,
-121.5c-0.2,-138.7 -114.7,-251.1 -253.4,-249c-134.7,2.1 -243.5,110.9 -245.5,245.6a249.5,249.5 0,0 0,390.6 209.5l0.2,
0.2 155.1,155.1 81,-81ZM249.5,439.3c-104.8,0 -189.9,-85 -189.9,-189.9s85,-189.9 189.9,-189.9S439.3,144.6 439.3,
249.5 354.3,439.3 249.5,439.3ZM157.3,133l7.7,-22.1a161.3,161.3 0,0 1,52.5 -20.5l-19.8,56.8A19.3,19.3 0,0 1,
173.1 158.9l-4,-1.4A19.3,19.3 0,0 1,157.3 133ZM177.4,215.6L135.3,288.4a19.3,19.3 0,0 1,-26.3 7l-3.7,-2.1a19.3,
19.3 0,0 1,-7 -26.3L140.3,194.2a19.3,19.3 0,0 1,26.3 -7l3.7,2.1A19.3,19.3 0,0 1,177.4 215.6ZM94.7,200.7A161.6,
161.6 0,0 1,114.1 159.9l9.1,9.1a19.3,19.3 0,0 1,0 27.2l-3,3A19.2,19.2 0,0 1,94.6 200.7ZM246.4,146.7A19.3,19.3 0,
0 1,257.3 121.7l55.5,-21.7a162.4,162.4 0,0 1,43.9 27.6A19.2,19.2 0,0 1,351.3 130.9l-78.3,30.6a19.3,19.3 0,0 1,
-24.9 -10.9ZM233,175.8 L299.7,227a19.3,19.3 0,0 1,3.5 27l-2.6,3.4a19.3,19.3 0,0 1,-27 3.5l-66.7,-51.2a19.3,19.3 0,
0 1,-3.5 -27l2.6,-3.4A19.3,19.3 0,0 1,233 175.8ZM316.6,367.3 L313.8,370.5a19.3,19.3 0,0 1,-27.1 1.9l-63.4,-55.3A19.3,
19.3 0,0 1,221.3 289.9l2.8,-3.2a19.3,19.3 0,0 1,27.2 -1.9l63.4,55.3A19.3,19.3 0,0 1,316.5 367.2ZM376.7,176.1 L380.7,
177.7a19.3,19.3 0,0 1,10.7 25l-31.3,78.1a19.3,19.3 0,0 1,-25 10.7l-4,-1.6A19.3,19.3 0,0 1,320.3 264.9l31.3,-78.1A19.3,
19.3 0,0 1,376.6 176.1ZM210,390.3a19.2,19.2 0,0 1,-4.8 15.4a161.4 161.4,0 0,1 -38.4,-16.5l-9.9,-76.8a19.3,19.3 0,0 1,
16.6 -21.5l4.3,-0.6A19.3,19.3 0,0 1,199.3 306.9ZM391.7,323.9L390.3,330.3a163.1,163.1 0,0 1,-56.5 57.9l16.1,-73.5a19.3,
19.3 0,0 1,22.9 -14.7l4.2,0.9A19.3,19.3 0,0 1,391.7 323.9Z"/>

Try that and see if it works any better.

Answer 4

Native can't display arcs, but appCompat can. So instead:

<ImageView
    android:src="@drawable/mydrawable"
/>

use

app:srcCompat="@drawable/mydrawable"

It's that simple o_O.

(app is xmlns:app="http://schemas.android.com/apk/res-auto")