How to create proper Vector Images that can be used as an Android Vector-Drawable?

Question

I'm quite new to creating vector images. I started to learn how the create them because I need some custom icons for an Android app I'm currently working on. And here starts the problem. I'm creating the icons using Inkscape and when I try to convert them into a VectorDrawable using Android Studio, it returns an error about not supporting certain things:

ERROR@ line 22 <defs> is not supported
WARNING@ line 139 We don't scale the stroke width!
WARNING@ line 144 We don't scale the stroke width!
WARNING@ line 150 We don't scale the stroke width!
WARNING@ line 156 We don't scale the stroke width!
WARNING@ line 162 We don't scale the stroke width!
WARNING@ line 168 We don't scale the stroke width!
WARNING@ line 174 We don't scale the stroke width!

I firts tried to somehow convert the path to an object within Inkscape, but this didn't worked. Then I looked for some solutions on the web and found the following website: http://inloop.github.io/svg2android/ There I could convert the icon but now I can only use it android 7.0 and higher because I used the attribute 'fill-rule:evenodd'.

Now here's my question: How to make sure I only use the proper attributes when creating an icon and how can I make my icon work on android?

If you want to follow my attempt at fixing the problem, here you can download my SVG file: https://dl.dropboxusercontent.com/u/213285061/Foren/Biologie_Icon.svg

Thank you for every advice.

Answer 1

Solution

Save as a "Plain SVG" in Inkscape.

Note: As of Inkscape 0.91, if you save as "Plain SVG" and then just do a normal "Save", it will save again as an Inkscape SVG. So you'll need to do save and explicitly select plain SVG each time.

Related question about SVG-to-VectorDrawable conversion: Inkscape export XML for Android drawable resource directory

Explanation

Inkscape's default save format is "Inkscape SVG", which is a normal SVG file that is compliant with the SVG 1.1 standard, along with metadata and additional information used by Inkscape in the inkscape namespace.

That's perfectly valid SVG, and most render programs like browsers have no problem with it. It sounds like your workflow for transforming from SVG to VectorDrawable XML is chocking on that Inkscape-specific code (although <defs> is valid vanilla SVG).

Saving as "Plain SVG" removes all that extra data and any features that aren't in the SVG standard. This will result in better compatibility with other programs (like yours), but you may loose some information, depending on the drawing.

Features to avoid

By far the most common non-standard SVG feature people use is a text flow. These are created by dragging to create a text box (instead of just clicking). Wrapping text is not support in SVG—many programs will just ignore the text.

In the Text menu, there's an option in Inkscape for converting a text flow to a normal SVG text object.

In most cases, the offending element can just be converted to a path.

Tweaking output

In addition to using "Plain SVG", there are a few other features for tweaking the SVG tree in Inkscape's output.

• On the File menu, click Document Cleanup. This gets rid of un-used defs and other metadata.
• On the Edit menu, click Preferences. In the Input/Output section there's a few options to change the XML