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.
#!/bin/sh
#
# 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: inkscape-screen-export.sh
- Instructions:
- Prep your SVG file as noted above.
- Download the script and save it in your home directory or some other place you’re cool with.
- Open up a terminal and change directory to where you downloaded the script, where ‘username’ is YOUR username:
cd /home/username
- Change the permissions on the script so that it’s executable:
chmod +x inkscape-screen-export.sh
- 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:
./inkscape-screen-export.sh /home/username/mockups/mockup*.svg
- 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:
/home/username/mockups/PNG/mockup-anaconda-01-welcome.png
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. 🙂
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)
I gave it a quick try and it didn't work, but I may well have done something quite stupid. I'll try again later! Thanks for the tip!
Sorry, my bad. I forgot one has to supply the export command in the stdin of the inkscape –shell, not on the command line.
Here is a modified version of your script with this change (which runs faster when you have several "screen"s in the file). http://fpaste.org/NQ6g/
Second try, use the same output filename as the original script: http://fpaste.org/UOVI/
Thanks Alex, it works great!
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.
Awesome! Btw, are there any good tutorials for making wireframes/mockups with Inkscape?
Robin, I started writing a book on it back in 2009 and kind of completely forgot about it, so I just now grabbed what I could find from that and put it up on this wiki:
http://www.linuxgrrl.com/learn/Creating_Mockups_w…
I found a couple other things besides my crap that pops up on Google:
– This seems interesting – converting the Yahoo! YUI stencils to SVG and using them in Inkscape, although I question his use of the 'Open' dialog (you can just open up a nautilus window side-by-side and drag & drop. The widget creation chapter of the above goes over this.) http://blog.ciscavate.org/2008/09/breaking-away-f…
– Donna Benjamin did some slides! I haven't checked them out yet but she is an excellent Inkscaper and is on identi.ca too so I am sure they are great. http://2011.drupaldownunder.org/session/inkscape-…
Hope it helps.