Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 221
cottonBallPaws Avatar asked Jan 05 '15 18:01

cottonBallPaws


People also ask

What is Android path data?

PathData in vector images android is Vector graphic program's script. It is not exactly clean and human readable code as a high priority.

Does Android studio support SVG?

Android Studio includes a tool called Vector Asset Studio that helps you add material icons and import Scalable Vector Graphic (SVG) and Adobe Photoshop Document (PSD) files into your project as vector drawable resources.

Which of the XML files are responsible for providing vector graphics instructions in the new project of Android studio?

A VectorDrawable XML file.


4 Answers

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.

like image 52
Q.Jones Avatar answered Oct 21 '22 11:10

Q.Jones


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

like image 26
Paul LeBeau Avatar answered Oct 21 '22 11:10

Paul LeBeau


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.

like image 13
A-student Avatar answered Oct 21 '22 10:10

A-student


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.

like image 12
Dom Avatar answered Oct 21 '22 09:10

Dom