Introduction

In Android Studio, we can use VectorDrawable to draw icons, for example, ic_launcher_foreground.xml and ic_launcher_background.xml. This results in a beautiful launcher icon with no jaggies, since the icon is defined by vectors.

Editing VectorDrawable

While it is possible to convert Scalable Vectory Graphics (SVG) to VectorDrawable using Configure Vector Asset, there is no tool to edit VectorDrawable. In our favour is the fact that VectorDrawable is quite similar to SVG.

Mapping VectorDrawable to SVG

The following VectorDrawble elements and attributes map to SVG

The <vector> maps to <svg>. While you are at it, remove the attributes xmlns:aatp and xmlns:android
- Replace the attributes android:viewportHeight and android:viewportWidth with viewBox="0 0 w h"
- Replace the attributes android:height and android:width with height and width
In <path> elements,
- Replace the attribute android:fillColor with fill, or fill="none" if the attribute does not exist
- Replace the attribute android:pathData with d
- Replace the attribute android:fillType with fill-rule, and change the value to lower case
- Replace the attribute android:strokeWidth with stroke-width
- Replace the attribute android:strokeColor with stroke and stroke-opacity
- If gradient is used in the fill, create a new element <defs>, and the gradient definition

Beautiful Icon in SVG

The SVG icon may now be edited with your favourite SVG edit

Last updated on 27 September 2019

133, New Bridge Road #24-01

Chinatown Point S(049513) •

Tel: 6-552-6826 •

Email: sales@bumblebee.com.sg