Command-line generation of Android/iOS icons from SVG files.

SVG format has arrived to Android several years ago and can be used quite easily (in most cases). Here is very detailed instruction from official Android Documentation — https://developer.android.com/studio/write/vector-asset-studio.

Problem

But app:srcCompat tag works only for some views, some others still need PNGs. So when you are trying to give them SVG images, the app will not compile (in the best case) or just crash in Runtime.

Of course, you can ping your designer and he will make some PNGs for you. But wait… you bring SVGs into development process by a long discussion with your teammates, designers and even PMs. You probably said, that designer will only need to export one file and it will work everywhere, but now you need to ask him generate some PNGs for you, because don't have Sketch by yourself — NOT GOOD.

Solution

Of course, there is some command-line solution must exist, because at least Gradle can generate PNGs from SVG for lower APIs.

I've not succeeded to find any ready-to-use solution, so I created my own. Script uses librsvg to accomplish the task. Here is the detailed instruction how to use it:

1. Install librsvg on your computer. On MacOS it can be done by simple command brew install librsvg.
2. Copy and save gen_android_icons.sh, which is attached at the end of this article, to your computer.
3. Execute command . gen_android_icons.sh example.svg 24 24, where last two numbers are width and height of icon in mdpi resolution. It's the same as dp in your XML files.
4. Find ready-to-be-copied icons in the folder named as your icon.

Bonus

gen_ios_icons.sh is the script which generates iOS icons from SVG in all sizes that are required for usual icon. The only difference is the 3rd step where next command will be used . gen_ios_icons.sh example.svg 24 24 (last two numbers are width and height of icon in 1x).

Scripts

# gen_android_icons.sh
# Params: (filename) (width in mdpi) (height in mdpi)
# Get filename without an extension
filename=$1
filename_length=${#1}
name_length=$((filename_length-4))
name=${filename:0:$name_length}
mkdir $name
mkdir $name/drawable-mdpi
mkdir $name/drawable-hdpi
mkdir $name/drawable-xhdpi
mkdir $name/drawable-xxhdpi
mkdir $name/drawable-xxxhdpi
rsvg-convert -w $2 -h $3 $filename > $name/drawable-mdpi/$name.png
rsvg-convert -w $((3*$2/2)) -h $((3*$3/2)) $filename > $name/drawable-hdpi/$name.png
rsvg-convert -w $((2*$2)) -h $((2*$3)) $filename > $name/drawable-xhdpi/$name.png
rsvg-convert -w $((3*$2)) -h $((3*$3)) $filename > $name/drawable-xxhdpi/$name.png
rsvg-convert -w $((4*$2)) -h $((4*$3)) $filename > $name/drawable-xxxhdpi/$name.png

# gen_ios_icons.sh
# Params: (filename) (width 1x) (height 1x)
# Get filename without an extension
filename=$1
filename_length=${#1}
name_length=$((filename_length-4))
name=${filename:0:$name_length}
mkdir $name
rsvg-convert -w $2 -h $3 $filename > $name/$name.png
rsvg-convert -w $((2*$2)) -h $((2*$3)) $filename > $name/$name@2x.png
rsvg-convert -w $((3*$2)) -h $((3*$3)) $filename > $name/$name@3x.png