CODEWITHSUNDEEP
android-studiosvg
Felipe Jun
Felipe Jun

Reputation: 732

Inconsistence between SVG file and Android Studio vector asset

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

enter image description here

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:

enter image description here

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?

Upvotes: 19

Views: 10409

Answers (6)

Florian Cremer
Florian Cremer

Reputation: 139

I had the same problem when I exported my vector graphics in svg format. But Android studio can also handle the psd file format when importing vector graphics. After I set the file format to psd during export, the import into android studio worked fine for me.

Upvotes: 0

Anton
Anton

Reputation: 485

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>

Upvotes: 8

Nehuen Knopoff
Nehuen Knopoff

Reputation: 1

I had the same problem using inkscape. Not sure if would work with Sketch, but is simple to try it out.

Just start a new Sketch project and paste your vector from the previous one. This solved my problem with the same situation on Inkscape. It seems some extra properties used during creation of the picture are not welcome in android's import tool.

Upvotes: -1

A.J.Bauer
A.J.Bauer

Reputation: 3001

In Inkscape you can select lines a.s.o. that use stroke width and convert them to path before saving as sgv:

enter image description here

Upvotes: 1

Aldo Wachyudi
Aldo Wachyudi

Reputation: 18001

Here's how:

  1. Open your .svg in sketch
  2. Select that missing Circle in Page List. In my case, it's looks like this.

Page List

  1. Click Fills (Gear shaped icon) and change Even-Odd to Non-Zero

Fills

  1. Open Layer menu -> Path -> Reverse Order

Reverse order

  1. Export the shape back to .svg format

Export

  1. Convert that .svg to Vector Drawable (from Android Studio or 3rd party tools)

That's it! Credit to @dineshbob medium blog

Upvotes: 3

Richard Weber
Richard Weber

Reputation: 91

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.

Upvotes: 9

Related Questions