Android VectorDrawable doesn't show up in the layout

Question

I created a SVG vector graphic (using CorelDraw X7), that looks like this:

Then I used svg2android to convert it to VectorDrawable format. However, when I try to use it in the layout, it doesn't appear:

As you can see, there is another vector drawable right next to it, that works fine (so svg2android and Android Studio work fine).

This is the xml of the actual drawable:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
    android:fillColor="#000000"
android:pathData="M 1382,680 c 107,0 194,112 194,251 0,138 -87,250      -194,250 -2,0 -3,0 -5,0 -17,98
-85,219 -230,219 l 0,77 c 0,28 235,1 235,45 l 0,55 -556,0 0,-55 c 0,-59 235,-11
235,-45 l 0,-77 c -125,0 -211,-106 -230,-219 -1,0 -3,0 -5,0 -107,0 -195,-112
-195,-250 0,-139 88,-251 195,-251 l 0,0 0,-48 556,0 0,48 z m -555,413 -1,-325 c
0,0 0,0 0,0 -70,0 -126,73 -126,163 0,89 56,162 126,162 0,0 1,0 1,0 z m 555,-325
0,325 c 70,0 126,-73 126,-162 0,-90 -56,-163 -126,-163 z" />
</vector>

The only thing I notice different between the code of this file, and code of other, working files, is that some of the values in this file appear negative, compared to working files, where they are all positive.

What am I doing wrong?

Answer 1

The coordinates for the points in your path are way too large for the viewportWidth and viewportHeight that are specified.

The path bounding box is:

x:      631
y:      632
width:  945
height: 945

But your viewport settings are basically telling Android that it is:

x:      0
y:      0
width:  24
height: 24

So the shape is going to be drawn way off the edge of your icon area.

There are ways to fix it manually, but it would be better to adjust your CorelDraw file so that your graphic is at the top left of your page. Then make sure that the saved SVG has a viewBox. It is the viewBox that svg2android will be using to calculate the viewportWidth and viewportHeight.

If you can't make CorelDraw generate a viewBox, then design your icons on a fixed size page (eg. 100px x 100px). Then you should be able to get a working SVG by adding the viewBox manually.

<svg ... viewBox="0 0 100 100" ...>

Note: I'm doing some educated guessing here because I don't have CorelDraw to test with.

In the meantime, here is a hand-tweaked version of the file that I think should work (I've not tested it):

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="945"
android:viewportHeight="945">

<group android:translateX="-631" android:translateY="-632">
<path
    android:fillColor="#000000"
android:pathData="M 1382,680 c 107,0 194,112 194,251 0,138 -87,250      -194,250 -2,0 -3,0 -5,0 -17,98
-85,219 -230,219 l 0,77 c 0,28 235,1 235,45 l 0,55 -556,0 0,-55 c 0,-59 235,-11
235,-45 l 0,-77 c -125,0 -211,-106 -230,-219 -1,0 -3,0 -5,0 -107,0 -195,-112
-195,-250 0,-139 88,-251 195,-251 l 0,0 0,-48 556,0 0,48 z m -555,413 -1,-325 c
0,0 0,0 0,0 -70,0 -126,73 -126,163 0,89 56,162 126,162 0,0 1,0 1,0 z m 555,-325
0,325 c 70,0 126,-73 126,-162 0,-90 -56,-163 -126,-163 z" />
</group>
</vector>