Android VectorDrawable not showing in layout

Question

I created SVG vector graphics (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 does not appear:

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

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 zm -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 zm 555,-325 0,325 c 70,0 126,-73 126,-162 0,-90 -56,-163 -126,-163 z" /> </vector> 

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

What am I doing wrong?

Answer 1

The coordinates for the points on your path are too large for the specified viewportWidth and viewportHeight .

Path restriction field:

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

But your settings in view mode basically tell Android that it is:

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

Thus, the form will be removed from the edge of your icon area.

There are ways to fix it manually, but it’s better to configure the CorelDraw file so that your graphics are in the upper left corner of the page. Then, make sure the saved SVG has a viewBox . This is the viewBox that svg2android will use to calculate viewportWidth and viewportHeight.

If you cannot get CorelDraw to generate a viewBox, then create your own icons on a fixed-sized page (e.g. 100px x 100px). Then you can get a working SVG by adding a viewBox manually.

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

Note. I make some reasonable assumptions because I don't have CorelDraw to test.

At the same time, here is a manual version of a file that I think should work (I haven't 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 zm -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 zm 555,-325 0,325 c 70,0 126,-73 126,-162 0,-90 -56,-163 -126,-163 z" /> </group> </vector>