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.
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
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
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: firstname.lastname@example.org
Copyright Bumble Bee Laboratories Pte. Ltd. February 2019