How to export clean .svg from Adobe Illustrator for Android Studio

These are my notes taking from a last project, where I had to help Android developers with the hand-out of design mock-ups. Graphic sources were prepared by another designer incorrectly and there were a lot of issues. And due all of these it wasn’t available to use Zeplin or any similar magic tool for collaboration between designer and developer.

So this is the story about correct .svg export from the Adobe Illustrator for Android Studio. Useful for anyone who works with the .svg for the first time in Adobe Illustrator.

How I check .svg icons after export

I’ve made two simple steps for every icon to be sure that all of them will display correctly:

Step 1.

Upload all icons one-by-one into this link
This source helps to catch majority of bugs with more-less clear error messages. E.g.:

Warning #1: transforms on path are not supported, use option Bake transforms into path

Step 2.

Create a new project in the Android Studio, select App-Res-Drawable and press right button on the Drawable to add New Vector Asset. Now you can upload the desired icon and review the image in window appeared.

In case all looks OK — I get the .xml from Android Studio and give it to devs.

Here are some issues and tips&trick I’ve figured out during the export process (this list may vary and depends on the designer’s experience ;) So...

Don’t forget about:

1. Check Opacity settings for the exported object. Otherwise you will get the next warning message (the same text you’ll get with the Stroke problem, which is described below — but for the opacity this message isn’t obvious):

Warning: stroke-width not found on path one or more times. Defaulting all instances to 1.

You may use an Eyedropper Tool to get the numeric values color instead of transparency percentage.

2. No Strokes for the final icon’s version. Choose Object-Path-Outline Stroke to prevent the errors of displaying (most of all Android Studio will not display such image).

3. If you had apply Clipping Mask to some object elements and didn’t make the next sequence Object-Expand Appearance (or Expand) and Pathfinder-Crop you would get the next reminder:

Warning #1: transforms on path are not supported, use option Bake transforms into path

Warning #3: found clip-path(s) attribute which is not fully supported yet (try enabling support for clip-path below)

4. Avoid any Raster Effects (glowing, shadows, etc) — they will never be exported correctly.

5. Combine Shapes where it’s possible. Always try to simplify shapes.

6. Avoid Transformation. The possible text of error message below:

Warning: transforms on path are not supported, use option Bake transforms into path

7. Pay attention to the .SVG Export Settings in Adobe Illustrator. After the first export I’ve noticed that all images look like a black spots instead of colorful icons.

Icon preview from Android Studio
This one setting leads me to the ‘black spot’ icon in the Android Studio.

I found the possible solution here and here.

Styling: “Presentation Attributes” means stuff like fill: red; rather than “Inline Styles” which means style=”fill: red;”. Presentation attributes are easier to override in CSS. Inline styles provide more style resilience. There is also an option to export styles in a <style> block within the SVG, which may be efficient on SVG with lots of similar elements.

Here is the result with updated preferences:

Set ‘Presentation Attributes’ in Styling to get the marvelous bright icons.
Icon preview from the Android Studio (exported with correct settings from AI)

Hope, these notes will be helpful for you. If you found another useful tips for export and preparation options — please share with us, I’ll update the post. Thanks for reading!