Android Icon Converter
In this section you will learn how to use icon-converter and its features to export a given SVG-file for different screen densities and for different versions. Then you will learn how to use icon-converter to change the colors of your icon.
Warning: in the following examples the binary file is called by icon-converter. In Windows, you may have to replace this by C:/path/to/icon-converter.exe.
Warning: if the following examples print any errors, you may have to specify the -c argument (see Usage Details).
Different Screen Densities
icon-converter will create five different PNG-files for each source SVG-file. Each PNG-file will be scaled and placed in the directories in the res/ folder where android will search for it.
In the following example we want the coffee icon to be exported for all screen densities. The icon exists as an SVG-file and has a size of 32x32 pixels. Border and color are chosen to fit the icon guidelines for an icon for the action bar. Therefore, no recoloring is necessary.
The following call will convert the SVG file coffee.svg:
$ icon-converter -i coffee.svg -o /path/to/res
In the folder /path/to/res there will be five subdirectories drawable-mdpi, drawable-hdpi, drawable-xhdpi, drawable-xxhdpi, drawable-xxxhdpi. Each of them will contain a PNG-file coffee.png with the right pixel sizes:
Android offers the developer to use different PNG-files for different versions of android. E.g. in older versions of android, namely all versions before v-11 (Android 3.0), the actions which are found in the action bar in later versions where displayed in a context menu. Android requires those menu icons to have different sizes (mdpi: 48x48 pixels).
The following calls will export the coffee icon for both versions. First, the output of the first example is used to create the PNG-files for versions higher or equal v-11:
$ icon-converter -i coffee.svg -o /path/to/res -v v11
For all versions lower than v-11, the icons have to be scaled by 1.5:
$ icon-converter -i coffee.svg -o /path/to/res -z 1.5
this will result in ten different folders (each dpi folder with and without -v11 suffix). Each folder will contain a file coffee.png. In res/drawable-mdpi the icon will have the size 48x48, in res/drawable-mdpi-v11 the size will be 32x32.
Recoloring an icon for an android app can have multiple reasons: some apps exist in both themes (light and dark) or some of your icons have an enabled/disabled state. icon-converter can replace a given color with another color. You can even change the alpha values.
In the following example, we will create two versions of the coffee icon: both for the light theme, one for the state enabled and one for the state disabled. As we designed the icon to match the enabled colors for the light theme (#333333, opacity 60%), we do not have to recolor the icon for the state enabled:
$ icon-converter -i coffee.svg -o /path/to/res -s _enabled
The -s option will add a suffix (in this example "_enabled") to each output files filename.
The color for a disabled icon is #333333 with an opacity of 30%. Therefore, the color #33333399 (RGBA) has to be replaced by the color #3333334c. The following command will create the disabled icons:
$ icon-converter -i coffee.svg -o /path/to/res -s _disabled -m 33333399 3333334c
The two files coffee_enabled.png and coffee_disabled.png in the xhdpi folder look like this:
In a second example, we use a modified SVG-file coffee_mod.svg. The cup has the RGBA color code #ff0000ff, the steam a color #00ff00ff. We change the color of the two components. First, we convert the cup to be gray and the steam to be blue:
$ icon-converter -i coffee_mod.svg -o /path/to/res -s _var_1 -m ff0000ff 33333399 00ff00ff 33b5e599
Second, we convert the steam to be transparent:
$ icon-converter -i coffee_mod.svg -o /path/to/res -s _var_2 -m ff0000ff 33333399 00ff00ff 00000000
The resulting icons (as well as the source icon coffee_mod.svg) will look like this:
When replacing a color, icon-converter searches for the source color and replaces all occurances with the destination color. The alpha value is gained by combining alpha from source and destination color.
Sometimes it can happen that the borders of a figure with a given color has a slightly different color than expected. In this case, replacing only one color will leave this border. If this happens, you can set a tolerance (-t) between 0.0 and 1.0. 0.0 will replace exactly the specified color, 1.0 will replace any color.
Next: App-specific Setup