Inconsistence between SVG file and Android Studio vector asset

Question

I'm using the Sketch software to build svg images to use in my android project. I'm having an issue with this one:

As you can see, the picture is ok and I checked the previews with Chrome and the Macos preview.

When I try to import the SVG in Android Studio the import preview is the following:

The subtracted circles inside the filled ones are gone. The import log messages me this:

In ic_percent.svg:
WARNING@ line 10 We don't scale the stroke width!
WARNING@ line 11 We don't scale the stroke width!
WARNING@ line 12 We don't scale the stroke width!
WARNING@ line 13 We don't scale the stroke width!

Does anyone know what is happening with my import?

Answer 1

I had similar issues when importing a .svg file made with Inkscape. It seems that some attributes are just not supported by the Android Studio importer.

The easiest way I found is to use svg2android. Not sure how it handles Sketch .svg but it seem to do the trick with files from Inkscape.

If someone else uses Inkscape don't forget to set your document size to your vector size "File -> Document Properties..." or just edit it directly in the file with a text editor.

Answer 2

Short answer: Ungroup everything you have in your SVG, make sure you don't have layer transforms and resave.

Long answer: Every stroke has width, it is numeric and encoded in SVG as

<path style="...;stroke-width=1.5;...">

At the same time every stoke is an object and objects can be grouped for the sake of editing ease. Groups are objects also, thus can be grouped so that groups can have nested groups. Whats most important, groups have transformations, that are created when you move or scale or rotate grouped objects (e.g. paths) in your vector editor and that are encoded in SVG as

<g transform="...">
  <path .../>
  <path .../>
  <some other object .../>
</g>

The "transform" attribute can be either a "matrix" or a sequence of linear transformations like "rotate" or "translate" or whatever, it does not matter in this case. All transforms of a group are applied to all contained object properties.

So group "transform" is applied to the contained path "stroke-width".

This is exactly what Android Studio does not support.

The solution is simple: Ungroup all the groups and force vector editor to apply transformations to the real geometrical objects. Then export again.

There still will be groups in the resulting file, that's fine - it's the only way to store layers in SVG. Just make sure layers in the file do not have transforms applied. Most probably you will not have to do anything for this, as vast majority of vector editors can only have visual and not geometry effects on them.

That's it.

Example of a piece of very simple file that will break Android Studio import. This is just two random strokes, grouped and scaled with mouse:

<g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <g
       id="g821"
       transform="matrix(0.74621726,0,0,1.3160501,48.238048,-10.434556)">
      <path
         inkscape:connector-curvature="0"
         id="path815"
         d="m 58.964284,69.458334 31.75,-5.291667"
         style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
      <path
         inkscape:connector-curvature="0"
         id="path817"
         d="M 77.863093,95.160713 112.6369,77.017855"
         style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    </g>

The same piece after ungrouping that is fine for Android Studio:

<g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <path
       style="fill:none;stroke:#000000;stroke-width:0.26219916px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 92.238214,80.976091 115.93061,74.011993"
       id="path815"
       inkscape:connector-curvature="0" />
    <path
       style="fill:none;stroke:#000000;stroke-width:0.26219916px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 106.34083,114.80171 132.28965,90.9248"
       id="path817"
       inkscape:connector-curvature="0" />
  </g>