Delicious Inkscape mockup export script

Thanks to Ray’s bash scripting prowess and help, I am now in possession of a delicious script that makes exporting multiple PNGs from one master mockup Inkscape SVG file easy.
Further development might involve automagical wiki uploading, perhaps based on a wikipage name you input into the script..? 🙂 ?
I documented it pretty well so I it speaks for itself. I guess the only thing I’d add, is to give the frames in your Inkscape SVG an id, you need to right-click the object you’re using as a frame, and select ‘Object Properties’ for the menu. You don’t need to right-click and select the ‘Object Properties’ item for each and every frame—you may simply keep the ‘Object Properties’ dialog open and click on each frame object as you go.

# SVG prep:
#       if you have screen mockups in an SVG, draw a rectangular object/frame
#       around each screen you'd like to export. give each frame an id of
#       'screen-$NAME', where $NAME is the name of the mockup. For example,
#       a frame with id="screen-main-menu" from an SVG with the name
#       '01_mockups.svg' will be exported to a PNG with the name:
#               01_mockups-main-menu.png
# input:
#       name of SVG file
# output:
#       any objects with an id of screen* will be exported into a PNG
#       subdirectory from where the script is run
cat $1  | grep 'id="screen' | awk -F'"' '{ print $2 }' | while read line;
do inkscape $1 --export-id=$line --export-png=
PNG/$(basename $1 .svg)-$(basename $line screen-).png; done

Want this script?

  • Download:
  • Instructions:
    1. Prep your SVG file as noted above.
    2. Download the script and save it in your home directory or some other place you’re cool with.
    3. Open up a terminal and change directory to where you downloaded the script, where ‘username’ is YOUR username:
      cd /home/username
    4. Change the permissions on the script so that it’s executable:
      chmod +x
    5. Run the script, inputting the name of a single SVG (or a regular expression matching all SVGs you’re interested in.) We’re using an example directory path here; adjust as necessary for your particular directory structure:
    6. ./ /home/username/mockups/mockup*.svg
    7. All of your PNGs will be neatly placed in a ‘PNG’ subdirectory, named according to the IDs of the frames in your SVG. For example, if I had one mockup SVG above, ‘mockup-anaconda.svg’ and I had one frame in it with ID ‘screen-01-welcome’, then I’d find the following lovely little PNG awaiting me:

Okay, maybe it’s just a silly little insignificant 1-line script. and you could have drooled it out in your sleep, but it’s pretty time-saving for me, and I’m super-excited about it. 🙂


  1. Alex Ho

    Inkscape's startup time is a bit long, so please take a look at "inkscape –shell", which greatly speeds up the process of exporting multiple pngs.
    for example:
    inkscape –shell foo.svg –export-id screen-1 –export-png PNG/screen-1.png foo.svg –export-id screen-2 –export-png PNG/screen-2.png
    (all "export commands" one after the other on the same command line)

  2. mtredinnick

    Hey, don't apologise for the script being short or possibly viewed as silly. Right now there are a bunch of people reading this blog who just went "I didn't know you could export like that from Inkscape" or "oh, right… hadn't thought of just grepping through the XML to get data" and another bunch (crazy types like me) thinking about alternative approaches and how it can fail.
    The short tips are often the most long-term useful.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.