How To: Automation Export PNG in Inkscape V1.0

What's up? 

Been a while eh? Everyone is doing well avoiding Covid19 I see. To the fallen ones, RIP. Nobody lives forever. Those that goes on, keep up keeping up. 

Today I will be posting about how we can automate Inkscape export. I.. have...been.. doing... stupid... things.... for... 10 years. *SMACK HEAD*. Aw come on, everyone does stupid thing once in a while. Nobody is holy. What I mean, is for 10 years or more since I used Inkscape I have exported PNG for use in iOS apps this way:

It's a 18MB GIF File. :P

Enough to illustrate the amounts of keyboard presses and mouse clicks just to save @1x, @2x, @3x PNG of a particular image! Crazy!

Enter the Inkscape 1.0 Command line! 

Inkscape has been Beta for a long while. And recently they (WHO IS 'THEY'?????), released a V1.0. With it, comes awesomeness and pizzas. Ok kidding about the pizza. But dark mode, and the fact that it no longer requires X11 to run tastes like pizza really. So good. Even in Beta, command lines exist, but there are not much tutorials about it. Especially on Mac.

So I had some time to tinker with it, and managed to make it work after 3-4 hours. 

The command line works with the inkscape binary that resides INSIDE the Inkscape.app package that resides in /Application/ folder. As MacOS uses linux base, we can write a simple bash script to automate the export of a particular object groups.

There are requirements to implement this:

You need to know your way around the Terminal app, and linux basic command lines like cd, ls, etc.

You need to specify FULL PATHS to input SVG and output PNG, otherwise the binary is going to assume it exist in current directory.

You need a code text editor like Atom. But, you can also use TextEdit, but the syntax will not be highlighted in pretty colors. :P

In the SVG, you need to give "ID" to the objects that you grouped to be exported.

For this tutorial, I will setup a script that resides in your home user directory. For me it is

/Users/genecode

So in this folder, I shall create another folder for svg file.

/Users/genecode/svg

Then we will output the PNG in another folder.

/Users/genecode/output

Now lets create the SVG file. I made this car with tyres in inkscape. All are in same layer. For this to work, it does not matter which layer the object resides. What matters is what unique ID you gave them.

(My awesome artwork :P)

Lets assume you want to export the car body into carBody@1x,@2x,@3x and carTyre@1x,@2x,@3x. Notice that the body is just one object created with Pen tool. And that each of the tyre is 2 objects (black and grey circles).

Before saving the svg, click the body, right click and select "Object Properties" on the menu. Then on "ID", enter "bodyID" for example. Then click "Set" button. (ID can be anything you choose). Do the same with one tyre, group the tyre into one group, and right click and select "Object Properties". on ID, enter "tyreID".

Once that done, save your drawing.svg in the /User/genecode/svg/ folder , and open your code editor. 

First, I decided that I want to be able to give the automation script a parameter input of the svg filename. Something like 

sh export.sh drawing

This enables me to export from any svg that I want. Here is the script that I came up with, that complies to the folders that we created earlier:

for i in {1..3}
do

  WID=$((600*i))
  /Applications/Inkscape2.app/Contents/MacOS/inkscape --export-type="png" --export-id="bodyID" --export-id-only --export-filename="carBody@${i}x.png" --export-background-opacity=0 --export-width=$WID  $(pwd)/svg/$1.svg

done

The inkscape command line starts at /Applications/Inkscape2.app... The rest are bash.

What does the code do? 

for i in {1..3}

WID=$((600*i))

First, this will loop the command line 3 times to produce @1x.png, @2x.png and @3x.png in one go. I also has a formula to automatically calculate the width of each PNG in each passes. First will be 600, second 1200, and third 1800 pixels.

/Applications/Inkscape2.app/Contents/MacOS/inkscape

Also to note, that my Inkscape is named Inkscape2 in Applications, hence my path points to that. That is because I still have the beta version inkscape as "Inkscape" in Applications. So you need to change yours to be Inkscape.app if you do not name it differently.

--export-type="png"

This will tell inkscape to output PNG files.

--export-id="bodyID"

This will tell inkscape to export only the objects with group ID "bodyID" as we set in Object Properties above.

--export-id-only

This will tell inkscape to object with export ID only.

--export-filename="$(pwd)/output/carBody@${i}x.png"

This will tell what filename the exported PNG will have. Here I put in variable names based on the loop variable. This will match to iOS app standard. pwd is a standard unix command to get (p)arent (w)orking (d)irectory. Since the script resides in /Users/genecode, this line will translate to /Users/genecode/output/carBody**.png

--export-background-opacity=0

This will tell inkscape to export with transparent background.

--export-width=$WID

This will specify the width of PNG to export.

$(pwd)/svg/$1.svg

And finally this is the input SVG file that are input by parameter as we've decided. pwd is a standard unix command to get (p)arent (w)orking (d)irectory. Since the script resides in /Users/genecode, this line will translate to /Users/genecode/svg/drawing.svg

GREAT! EASY RIGHT?

Now lets see the script in action:

As you can see, 3 images of the carbody are exported to the output folder on the go. You can then add more lines in that for loop to add more objects to be exported automatically.

Here are the results:

This will surely save your time! Ok thanks for reading. Cheerio.