How to create Android VectorDrawables from Illustrator (or similar tool)?

Question

If I have a vector image in a program like Illustrator, how can I end up with the correct format for Android's VectorDrawable framework to use?

I found a tool to convert SVG to the VectorDrawable xml format: http://inloop.github.io/svg2android/ but it requires SVGs only use "path".

Any ideas how to output files like that?

Solution 1

That tool only appears to currently support <path> elements. So for example it doesn't support <rect>, <circle> etc.

If you are using primitives like this in your drawing, you need to convert them. I forget the exact option you need to use, but it's probably something like "Convert to path".

This link may help.

https://graphicdesign.stackexchange.com/questions/15475/convert-primitive-to-path-using-svg-format-in-illustrator

Solution 2

If you're using Android Studio, the best method is:

• Right-click on your 'drawable' folder > New > Vector Asset
• Click 'Local SVG file' to import your own SVG file, or 'Material Icon' to use the supplied icons.
• Change the resource name to whatever you need it to be.
• Click Next and choose your target modules and res directory.
• Click Finish.

The wizard produces XML from your SVG files.

Solution 3

Just use SVG to VectorDrawable Converter or its online version. This is a batch converter of SVG images to Android VectorDrawable XML resource files.

Link points to readme, which provide enough information on how to use the converter.

Solution 4

Convert Everything into Paths

Before saving your AI project file as an SVG, make sure you:

1. Convert all paths to outlines, using Object > Expand....

2. Convert any shape paths (such as <circle>) to Compound Paths by right-clicking while you have the object/s selected, and choosing Make Compound Path.

Once that's done each shape in the SVG should be a <path>.

---

Optimise the SVG

When I tried to convert an SVG of medium complexity to a vector drawable using the app mentioned in the question, I had issues with it forgetting some parts. I figured it must have something to do with the way it's formatted, so I decided to use SVGOMG, an SVG optimisation app, to strip it down to its bare essentials.

Use SVGOMG, or another app, to optimise the SVG, and then download the file.

---

Convert the Optimised SVG into a Vector Drawable

Take the downloaded SVG and drop it into SVG2Android and it will give you what you're after.

View more solutions