Android Studio does not import all parts of an SVG Vector

Question

I want to import some vector graphics from illustrator for the design of my android studio app. If I export my vector graphics as SVG, this works wonderfully. All parts of my project are successfully exported and the result is satisfactory (image 1). However, when I create this SVG file as a new Vector Asset in Android Studio, one of my blue circles is suddenly missing (see image 2). What can be the reasons why Android studio does not import all parts of my SVG? Or could the reason be a wrong export from illustrator?

Edit: Added Picture 3 to show what happens if I use a online converter instead. The output is even worse.

Any Help is appreciated!

Picture 1:

Picture 2:

Image 3...Result when I use a online converter to get a xml vector(also wrong)*

Answer 1

The version of the SVG that is displayed in the converter window is rendered by a built-in SVG renderer in Android Studio. It's a preview of the SVG. It does not necessarily reflect what the output of the converter will be.

So the bug you are seeing is with the built-in SVG renderer.

VectorDrawables don't really support gradient fills. At least the converter doesn't support them. So even if the displayed SVG were perfect, the generated VectorDrawable won't include the gradient circles anyway.

So you have a few alternative approaches:

1. Change your circles to solid fill and then convert to VectorDrawables.
2. Like #1, but add gradients by using predefined gradient definitions.
3. Use an actual SVG rendering library (like AndroidSVG) in your app.
4. Switch to using a bitmap background (ie PNG)
5. Draw the background yourself using Canvas methods.

Personally, I would go with #3.

Answer 2

Android Studio doesn't convert complex graphics into vector drawable. It only converts flat icons. You have to use a png here dude !!