mostly c# and wpf

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.

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.

I’d never heard of it before, but it looks pretty powerful. In this case, I was already using Inkscape and had a sneaking suspicion it would have some kind of scripting built in, but if I ever have a more complex script, I’ll have to keep it in mind.