Automatic resize of icons for mobile applications, or how Inkscape + bash make life easier

The solution outlined in the article is written for OSX users. But it can be quite simply adapted to other popular operating systems.

It all began with a non-trivial task: when a web service and mobile application is created, inevitably there is a need to make a presentable or not very presentable icon for it. But it is worth starting the creation of an application for IOS in XCode, as soon as you learn that you need not one icon, but about a dozen, and of different sizes. Here are just some of them:

• icon to display tabs on browsers;
• web application icon displayed in safari mobile;
• Mobile application icon displayed on the main screen in ios;
• large icon for the app store;
• small icon for app store;
• icon for search in spotlight.

And now attention: practically for each item from this list there are also own sizes - depending on type of the device and the version of iOS. Detailed icon specification for web and ios applications is here .

The solution "in the forehead" - in each case, make a resize and save it in a file with its unique name. Great, we have already spent 30 minutes on this procedure. But sometimes there is a strange desire to change something in the icon. And such a desire may occur several times.

Now, each iteration of processing icons will require you to resize and re-save.
')
At the very moment when it begins to seem like doing a monkey's work is not the best idea for a person burdened with intellect, you may start searching the Internet for solutions and stumble upon this article.

It turns out that the process of resizing and saving icons in different formats, different sizes and with different prefixes that indicate the purpose of the icon can be fully automated.

What is required for this:

• Icon in svg format (for our example, the file is called icon.svg)
• Inkscape
• Short bash script
• Terminal

Inkscape is a free vector editor available on all popular OS. In this case, its beauty lies in the fact that Inkscape can be controlled using the command line. Automate the process will help bash-script.

Preparatory stage

First, prepare the bash script:

#!/bin/bash INK=/Applications/Inkscape.app/Contents/Resources/bin/inkscape if [[ -z "$1" ]] then echo "SVG file needed." exit; fi BASE=`basename "$1" .svg` SVG="$1" # favicon tmpl 16pt $INK -z -C -e "favicon.ico" -f $SVG -w 16 -h 16 # iPhone Spotlight iOS5,6 Settings iOS and iPad 5-7 29pt $INK -z -C -e "$BASE-29.png" -f $SVG -w 29 -h 29 $INK -z -C -e "$BASE-29@2x.png" -f $SVG -w 58 -h 58 # iPhone Spotlight iOS7 40pt $INK -z -C -e "$BASE-40@2x.png" -f $SVG -w 80 -h 80 # iPhone App iOS 5,6 57pt $INK -z -C -e "$BASE-57.png" -f $SVG -w 57 -h 57 $INK -z -C -e "$BASE-57@2x.png" -f $SVG -w 114 -h 114 # iPad Spotlight iOS 7 40pt $INK -z -C -e "$BASE-40.png" -f $SVG -w 40 -h 40 # iPad Spotlight iOS 5,6 50pt $INK -z -C -e "$BASE-50.png" -f $SVG -w 50 -h 50 $INK -z -C -e "$BASE-50@2x.png" -f $SVG -w 100 -h 100 # iPad App iOS 5,6 72pt $INK -z -C -e "$BASE-72.png" -f $SVG -w 72 -h 72 $INK -z -C -e "$BASE-72@2x.png" -f $SVG -w 144 -h 144 # iPad App iOS 7,8 60pt $INK -z -C -e "$BASE-60@2x.png" -f $SVG -w 120 -h 120 $INK -z -C -e "$BASE-60@3x.png" -f $SVG -w 180 -h 180 #iTunes Artwork $INK -z -C -e "$BASE-512.png" -f $SVG -w 512 -h 512 $INK -z -C -e "$BASE-1024.png" -f $SVG -w 1024 -h 1024 cp "$BASE-512.png" iTunesArtwork.png cp "$BASE-1024.png" iTunesArtwork@2x.png 

The script is divided into blocks that describe the resize of icons for different purposes.

• INK - inkscape command line address adres;
• SVG - the address of the source file;
• BASE - the name of the source file, without specifying the format;
• the numbers at the end of each line are the dimension of the required icons;
• -z -C -e -f -w - standard Inkscape command line operators (see the full list here ).

What does the bash script do in this case? It launches the inkscape terminal, takes the source file, changes its size and saves it under the name, which consists of BASE (the constant part) and the prefix, which indicates the size of the icon. And so for all dimensions that are specified in the script. If you need any other sizes of icons or the names of the final files, you can edit the bash script.

Now, using the same xCode, create a rezise.sh file, copy the bash script into it and save the file in the same directory as the source of the icon in the svg format.

Launch stage

1. Open the terminal.app.
2. In terminal, go to the directory with the source code and script, using the standard command cd + path to the directory.
3. In the terminal run the command:

 ./resize.sh icon.svg 

Voila! After a moment, a set of icons in the right sizes and with the right names appeared in the folder along with the source.
If you change the source and rerun the command, the files will be overwritten. Therefore, it is possible now to experiment with the design of icons.

That's all.

The solution was peeped by me on one English-language site and was slightly reworked by me. There you can download resize.sh.

Use and do not waste your time.