VectorDrawable rendering issue VectorDrawable rendering issue android android

VectorDrawable rendering issue


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.


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")


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.