In an exciting tun of events I’ll be heading to Melbourne and teaching both overview and master courses on open source graphic design.
I’ll also be chatting at the Linux Users Victoria (LUV) meeting and hopefully grabbing dinner with a few of my favorite Inkscape and Batik developers 
Can’t wait to see all the cool kids there.
Many thanks to Richard Keech for setting this up.
Last post I used Pngcrush to compress a set of images. I thought I’d just post the scripts I use almost daily to keep my PNG assets lean.
Honestly I wish Pngcrush had these options without the need for crazy bash find or for-loops. But hey, It does one thing and does it well. I’m not complaining for its awesomeness.
All of these scripts use the –brute option which brute forces its way through numerous compression options until it finds the most effective way to describe your image in PNG for the smallest filesize.
for i in *.png;do  pngcrush -brute -d tmp "$i" ; done; mv -f tmp/* .; rm -rf tmp
find * -name "*png" -execdir pngcrush -d tmp {} ;
for file in `find . -name "*.png"`;do  echo $file;  pngcrush -brute "$file" tmp_img_file.png;  mv -f tmp_img_file.png $file; done;
I’m going to show you how to internationalize your graphics using inkscape and the gnome desktop.
Translations are always going to be variable length.
What might look short and snappy in Simplified Chinese may be a whole sentence to explain in Brazillian Portugese.
For this reason you should create designs with generous amounts of space around your words.
With SVG you may need to define a flowtext region. This is done in Inkscape by selecting the text tool and dragging. Centering text also works a treat.
We’re going to be creating .po files for translation without the need of opening the entire SVG XML or editing with inkscape. If you work with a translation community, this is much more considerate than throwing them headfirst into a text editor or inkscape.
Say we have a web graphic, a presentation, an advertisement, diagram whatever.
We’re going to translate it into 23 languages and walkaway unharmed.
Something to avoid is duplicating editable text.
You might want a drop shadow, blurred mask or some other effect layered above or behind your text. If so, make sure you clone (<use>) and not copy. You may be getting free translations from the community, it helps to not make them type the same phrase over and over again.
gnome-doc-utils sure is a beautiful package. The awesome GNOME developers have created a tool that will pull strings of text from your xml document and issue them as strings in a pofile.
Here is a test file for you to use for this exercise. Make sure you right click the link and select “save link as”.
xml2po -a -o en-US.po chrome.svg
We’re just going to copy the upstream po file and rename it as per each locale.
cp en-US.po as-IN.po cp en-US.po bn-IN.po cp en-US.po de-DE.po cp en-US.po es-ES.po cp en-US.po fr-FR.po cp en-US.po gu-IN.po cp en-US.po hi-IN.po cp en-US.po it-IT.po cp en-US.po ja-JP.po cp en-US.po kn-IN.po cp en-US.po ko-KR.po cp en-US.po ml-IN.po cp en-US.po mr-IN.po cp en-US.po or-IN.po cp en-US.po pa-IN.po cp en-US.po pt-BR.po cp en-US.po ru-RU.po cp en-US.po si-LK.po cp en-US.po ta-IN.po cp en-US.po te-IN.po cp en-US.po zh-CN.po cp en-US.po zh-TW.po
kbabel or gtranslator are the apps of choice for many open source translators. They will open up your pofiles and give friendly preview of only the text strings in your SVG and nothing else.
A word of warning. The depth of text in your SVG reflects the order the strings will appear in your pofiles.
This means you may confuse the logical flow of text by arranging text above or below shapes. Text sent to the bottom depth is displayed at the start of the generated pofile.
Another word of warning to your translators
That “image/svg+xml” string you see at the top of each pofile is unfortunately pulled into your pofiles via xml2po and shouldn’t be translated otherwise you may break the validity of your SVG.
Once your pofiles are given the all clear from translators you can generate the translation changes back into svg files specific to their locale.
xml2po -a -p en-US.po chrome.svg > chrome-as-IN.svg xml2po -a -p as-IN.po chrome.svg > chrome-as-IN.svg xml2po -a -p bn-IN.po chrome.svg > chrome-bn-IN.svg xml2po -a -p de-DE.po chrome.svg > chrome-de-DE.svg xml2po -a -p es-ES.po chrome.svg > chrome-es-ES.svg xml2po -a -p fr-FR.po chrome.svg > chrome-fr-FR.svg xml2po -a -p gu-IN.po chrome.svg > chrome-gu-IN.svg xml2po -a -p hi-IN.po chrome.svg > chrome-hi-IN.svg xml2po -a -p it-IT.po chrome.svg > chrome-it-IT.svg xml2po -a -p ja-JP.po chrome.svg > chrome-ja-JP.svg xml2po -a -p kn-IN.po chrome.svg > chrome-kn-IN.svg xml2po -a -p ko-KR.po chrome.svg > chrome-ko-KR.svg xml2po -a -p ml-IN.po chrome.svg > chrome-ml-IN.svg xml2po -a -p mr-IN.po chrome.svg > chrome-mr-IN.svg xml2po -a -p or-IN.po chrome.svg > chrome-or-IN.svg xml2po -a -p pa-IN.po chrome.svg > chrome-pa-IN.svg xml2po -a -p pt-BR.po chrome.svg > chrome-pt-BR.svg xml2po -a -p ru-RU.po chrome.svg > chrome-ru-RU.svg xml2po -a -p si-LK.po chrome.svg > chrome-si-LK.svg xml2po -a -p ta-IN.po chrome.svg > chrome-ta-IN.svg xml2po -a -p te-IN.po chrome.svg > chrome-te-IN.svg xml2po -a -p zh-CN.po chrome.svg > chrome-zh-CN.svg xml2po -a -p zh-TW.po chrome.svg > chrome-zh-TW.svg
Now you have a directory of svg images the same as your upstream.
If you are working with an environment that deals with PDF’s, you may want to ignore this step.
SVG’s are best sent through things like Batik when using FOP to create a pdf rather than rendered PNG for obvious reasons (vector=love)
If you are exporting to web or something else and want to be friendly to software that cant read your Inkscape crafted SVG:
This is the step for you.
for i in *.svg;do inkscape -e "${i/.svg/.png}" "$i" ;done
Of course on the web every byte counts pngcrush will give you the best file size without losing a pixel.
for i in *.png;do pngcrush -brute -d tmp "$i" ;done; mv -f tmp/* .; rm -rf tmp
Benefits of using this technique…
If you are a creating technical illustrations or diagrams you may want to alter your upstream version (In this case: en-US) as the conceptual changes.
Thankfully xml2po will regenerate translations from upstream regardless of new objects you create, styles you change or transformations you make to your original. This is wonderful for when management ask for their illustrations to be larger and changed to cornflower blue. More on automating that sort of thing across a set in a later post.
My good mate prokoudine has ported this article to RU
While reviewing the submissions for the Open Font Library logo competition we came across many concepts that nicely tied into the OpenClipart aesthetic. That was great.
We also noticed a tenancy to use glyphs from other scripts which was great but this really limits the brand for those coming from other nationalities who’s alphabet didn’t make it into the 3 used in the logo.
The best way to deal with this? Make a derivative logo for all locales!
As an exercise I took one submission by Marty, cleaned up the aesthetic a little and had it translated in 23 languages :-).
Considering I know only English and dumb English (translated here), It’s a privilege to have brilliant translators as colleagues.
Tools:
Inkscape (design)
XML2PO (conversion from SVG into pofiles )
RSVG locale specific style tweaks+rendering),
UPDATE:
I’ve published the major part of the technique for creating these translatable graphics here.
For the potential/past creators of gimp mockups in gimp..
Inkscape brings you : inkscape mockups with inkscape!
Well actually bryce put on the development roadmap for this release that we need to deliver some small mockups demonstrating animation functionality.
( just so we’re thinking about it )
I’ve decided to illustrate inkscape’s UI within inkscape so that others can have a play with creating their ultimate (yet simple) animators UI.
Here is the complete svg version for everything. Add a comment, jump on irc or the mailing list. just send in your ideas. Have fun!
Everyone knows mockups are a compelling attachment to feature requests.. so I decided to put a tiny request in for the fill and stroke dialogs no formatting state.
I also took the opportunity to draw up a feature request for gtk theme / window decorator designers *hint hint* . I mean the draw functions are specified in the SVG so if someone with a little too much cairo-fu and time on their hands wants to write an theme engine… go right ahead
The dark grey version requires semitransparent background but fully opaque widgets ( this actually cant be done easily to my knowledge )
Ok, so here is the beauty of open source. Things like this happen all the time. Infact they have happened so often that I never bothered blogging about it until today:
9:00 am
Some authors had submitted screenshots for a document.. Screenshots of the same 7 steps In 20 odd language.
Fortunately, the screenshots were only taken of the application window for most languages. Unfortunately, the size of each window was radically different ranging from 1600×1200 maximised to 600×300.
“I know an easy fix, the gimp will save us”
10:00 am After an hour of manually scaling down ui components of all these screenshots to fit the same neat 500×420 scale, it was time to output each screenshot as a png and commit it back to our repo.
Time for the crop tool
The crop tool in the gimp is quite handy:
You can both crop the current layer only… (neatly removing the junk around your selected area on that layer only).
You can also crop the whole image… ( needed when you have a large canvas from all those big screenshots and now need to output just the small portion as a stand-alone image.)
This next part is potentially heart breaking for the graphics geek in a deadline rush ( but dont worry I saved).
Anyway, I had cropped all my screenshot layers so that only the borderless area was visible. I then wanted to crop and save each layer as quickly as possible (beacause the clock was ticking).
The “current layer only” is really handy because it will only allow the user to move the crop reigon within the crop area of the current layer. This means if i had previously used the crop tool to neaten all my crud on the edges of each screenshot(layer) I could then use the crop tool to make my selections on each layer really fast because of the constrained selection area. This was working great from Traditional Chinese all the way to Korean.
10:30 am THEN IT HAPPENED!
I had a crop selection overlapping my layers crop area and clicked on the notorious “current layer only” option. I proceeded to grab one of the corner handle from the crop area and attempt to move it back inside the current layers area (thinking the current layer only option would snap this back inside).
Instead of my desired behaviour: BOOM gimp segfaults on me, crashing without warning. (not a problem, remember i had saved.. calm down)
This was a deadline where I couldn’t have afforded to re-perform any of the steps i just mentioned.
11:00am Once I got the screenshots out the door I pounced to my IRC window and pasted a makeshift bug report asking for confirmation then slammed open gimp’s bugzilla page and looked for duplicates.
Joao confirmed and mentioned he had looked at the crop tool code recently so he would be able to examine the cause.
11:30am Doing other things, i got caught by the same bug once before lunch. That was the second time …. bud i’d filed a bug … never again!
2:00pm
I came back from lunch and sitting in my bug report was a patch to fix my problem!
ONLY 3 HOURS AFTER FINDING A BUG MY PROBLEM WAS FIXED.
In that time: Joao had managed to replicate, work on and submitt a patch that solved the crash.
You won’t believe the number of times inkscape developers pjrm, bulia, nathan and more have fixed program functionality like this.
Now imagine trying to get that though even the most exclusive SLA with Adobe. It just won’t happen. And especially not for free.
Update: Joao is modest
joao: but this was slow.
joao: I’ve seen bugs in gimp from report to fix commited in less than 20 minutes.
joao: I am nowhere near these times.
Dear lazyweb, I’m done playing with this.
It was great fun but needs alot of work to get useful for the project. Why dont you try fixing it up for me.
download both illustrations in the one svg file
Unless Aaron releases one after this: Stremenstance
You’ll laugh, you’ll cry. You’ll even look towards the future and wonder why you’ve lost the taste for seafood.
Congratulations ACSpike on this masterful releasing of songs.
Made for NARMo , Stremenstance is a journey through awesomeness!!!!
Straight from the inkscape website:
The Inkscape team has posted a list of ideas for the Google Summer of Code project. If you’re a student and would like to have a summer job working on Inkscape for pay, this is a great opportunity! You can sign up send in your proposal through the Summer of Code site.
I added the idea for implementing external linking and external styles support. This is a wall-breaker for geeks like me and should be a top priority for everyone looking to make me dance on my desk.
Actually this gives me an idea. Recently I bountied up Dom Lachowicz for implementing external styles in RSVG, more people should do this, its not payment .. its like giving a case of nice beer to the mate who helped you move house. Thanks so much Do rsvg 4lyf~!!
So my deal is this: I’ll email a photo of myself dancing on my desk, signed with the inkscape calligraphy pen saying thankyou for implementing xlinking and external CSS maniulation. On top of that, you get the summer of code cash-money and the love and respect of countless SVG lemmings like myself. Pretty sweet yeah ?
just do it !
