Automating App Assets With Inkscape

I’ve been building a windows desktop application for the last year or so and I think it’s almost ready for release. The final step for any app, be it Windows, Android or Apple involves a lot of build optimizations and asset creation. Being lazy, I had already set up my build process to one-click, but my asset creation (icons, logos, splash screens) was still a very manual process. To make things even worse, I just had to change my application name, as it was already taken in the Windows Store, so I would now have to go through changing all my assets.

This is how I came up with the idea of automating my assets from a SVG file, using Inkscape. Now, none if this is probably ground-breaking, but I thought that I might as well share what I’ve got to hopefully make someone else’s life easier. This method will work for Android and Apple assets too, but you’re going to need to create a different batch file specific to those icons required, but the it’s essentially the same.

Step 1 is creating a new SVG file in Inkscape. Microsoft requires a whole bunch of different images, but they basically break down into 2 sets, a square icon and a rectangular one (with the weirdest proportion of 31:15). Since resolution doesn’t really matter in SVG files, I’d recommend you create a square icon of 150 x 150, and the rectangular at 310 x 150. That way, your images will be correct proportionally. Put whatever you want into those icons, just make sure they stay within those confines.

In my example below, I’ve shaded the background a light gray, just to make it easier to see the boundaries, but in your icon, make the background whatever you need it to be.

OK, now you need to group each icon and apply an ID to each of them. Highlight all the items in the square icon first, and use CTRL-G to group them as one item. Now do the same with the wide icon. Finally, right-click one of the icons and select Object Properties…. With this open, name each of your icons. In my example, I’ve simply named them Logo and LogoWide.

OK, so that’s mostly it, now we just use the Inkscape command-line utility to export each of those icons to multiple resolutions under multiple filenames. The utility is pretty powerful, you can do a lot of different kinds of export in it, I’ve only outlined the basic one in my script below, but here’s the reference for it

Here’s the script. Basically you’ll only have to change the variables at the top of the batch script. Take this file, change to point to your installation of Inkscape, your SVG file and your logo IDs (from Inkscape) and save it as a .bat file. Then give it a shot.

SET INKSCAPE=C:\Program Files\Inkscape\Inkscape.com
SET SVG_FILE=C:\GitHub\notedui\jott.svg
SET ASSETS_PATH=C:\Github\notedui\DesktopBridge\Images
SET ID_LOGO=Logo
SET ID_LOGO_WIDE=LogoWide

REM Square 71x71 Logo
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square71.scale-400.png" --export-id "%ID_LOGO%" --export-id-only --export-width 284
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square71.scale-200.png" --export-id "%ID_LOGO%" --export-id-only --export-width 142
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square71.scale-150.png" --export-id "%ID_LOGO%" --export-id-only --export-width 107
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square71.scale-125.png" --export-id "%ID_LOGO%" --export-id-only --export-width 89
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square71.scale-100.png" --export-id "%ID_LOGO%" --export-id-only --export-width 71

REM Square 150x150 Logo
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square150.scale-400.png" --export-id "%ID_LOGO%" --export-id-only --export-width 600
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square150.scale-200.png" --export-id "%ID_LOGO%" --export-id-only --export-width 300
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square150.scale-150.png" --export-id "%ID_LOGO%" --export-id-only --export-width 225
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square150.scale-125.png" --export-id "%ID_LOGO%" --export-id-only --export-width 188
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square150.scale-100.png" --export-id "%ID_LOGO%" --export-id-only --export-width 150

REM Square 310x310 Logo
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square310.scale-400.png" --export-id "%ID_LOGO%" --export-id-only --export-width 1240
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square310.scale-200.png" --export-id "%ID_LOGO%" --export-id-only --export-width 620
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square310.scale-150.png" --export-id "%ID_LOGO%" --export-id-only --export-width 465
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square310.scale-125.png" --export-id "%ID_LOGO%" --export-id-only --export-width 388
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square310.scale-100.png" --export-id "%ID_LOGO%" --export-id-only --export-width 310

REM Square 44x44 Logo
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square44.scale-400.png" --export-id "%ID_LOGO%" --export-id-only --export-width 176
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square44.scale-200.png" --export-id "%ID_LOGO%" --export-id-only --export-width 88
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square44.scale-150.png" --export-id "%ID_LOGO%" --export-id-only --export-width 66
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square44.scale-125.png" --export-id "%ID_LOGO%" --export-id-only --export-width 55
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square44.scale-100.png" --export-id "%ID_LOGO%" --export-id-only --export-width 44

"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square44.targetsize-256.png" --export-id "%ID_LOGO%" --export-id-only --export-width 256
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square44.targetsize-48.png" --export-id "%ID_LOGO%" --export-id-only --export-width 48
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square44.targetsize-24.png" --export-id "%ID_LOGO%" --export-id-only --export-width 24
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Square44.targetsize-16.png" --export-id "%ID_LOGO%" --export-id-only --export-width 16

REM Store Logo
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\StoreLogo.scale-400.png" --export-id "%ID_LOGO%" --export-id-only --export-width 200
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\StoreLogo.scale-200.png" --export-id "%ID_LOGO%" --export-id-only --export-width 100
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\StoreLogo.scale-150.png" --export-id "%ID_LOGO%" --export-id-only --export-width 75
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\StoreLogo.scale-125.png" --export-id "%ID_LOGO%" --export-id-only --export-width 63
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\StoreLogo.scale-100.png" --export-id "%ID_LOGO%" --export-id-only --export-width 50

REM Badge Logo
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\BadgeLogo.scale-400.png" --export-id "%ID_LOGO%" --export-id-only --export-width 96
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\BadgeLogo.scale-200.png" --export-id "%ID_LOGO%" --export-id-only --export-width 48
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\BadgeLogo.scale-150.png" --export-id "%ID_LOGO%" --export-id-only --export-width 36
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\BadgeLogo.scale-125.png" --export-id "%ID_LOGO%" --export-id-only --export-width 30
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\BadgeLogo.scale-100.png" --export-id "%ID_LOGO%" --export-id-only --export-width 24


REM Wide 310x150 Logo
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Wide310.scale-400.png" --export-id "%ID_LOGO_WIDE%" --export-id-only --export-width 1240
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Wide310.scale-200.png" --export-id "%ID_LOGO_WIDE%" --export-id-only --export-width 620
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Wide310.scale-150.png" --export-id "%ID_LOGO_WIDE%" --export-id-only --export-width 465
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Wide310.scale-125.png" --export-id "%ID_LOGO_WIDE%" --export-id-only --export-width 388
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\Wide310.scale-100.png" --export-id "%ID_LOGO_WIDE%" --export-id-only --export-width 310

REM Splash Screen
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\SplashScreen.scale-400.png" --export-id "%ID_LOGO_WIDE%" --export-id-only --export-width 2480
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\SplashScreen.scale-200.png" --export-id "%ID_LOGO_WIDE%" --export-id-only --export-width 1240
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\SplashScreen.scale-150.png" --export-id "%ID_LOGO_WIDE%" --export-id-only --export-width 930
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\SplashScreen.scale-125.png" --export-id "%ID_LOGO_WIDE%" --export-id-only --export-width 775
"%INKSCAPE%" --file "%SVG_FILE%" --export-png "%ASSETS_PATH%\SplashScreen.scale-100.png" --export-id "%ID_LOGO_WIDE%" --export-id-only --export-width 620

It takes about 30 second to build all those PNGs, but assuming you’re not rebuilding them every time you build the app, this is quite the time-saver. Let me know in the comments if you’ve come up with anything better.