Andy Fitzsimon

source update later

I’m going to show you how to internationalize your graphics using inkscape and the gnome desktop.

Prior Considerations

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.

Right, so here we go

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.

xml2po to the rescue

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

Create locale specific po files

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

Translate the po files

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.

Time to merge translated pofiles back into 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.

Export Images

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

Compressing PNG’s

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.

UPDATE:

My good mate prokoudine has ported this article to RU

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 !

Arron is bloody hilarious.

I think he’ll end up making a whole album of songs about vectors. The vector is mightier is a great song.

Something new that he’s working on is a call to arms, about the need for vector desktops and all the real world problems they’ll solve.
I’ve tried to contribute a verse about battlers working out in the sun needing to see important machinery icons on their consoles but not reading them because the stylesheet is fixed to look like OSX. a quick edit of his CSS and the high contrast vector desktop saves the day. and his eyes from accidentally pushing that self destruct button or something . hehe we’ll see.
grab the latest cut of this evolving musical marvel.

And to think 3 years from now people will be laughing. I cant believe they didnt have mainstream vector desktops back then….

We’ve just had the Libre Graphics Meeting in Lyon, France. It was awesome.

Lots got achieved , people got pumped up, pixels were pushed, beziers were bent and meshes got made.
I’m very stoaked that a conference containing this much synergy between groups I love to participate was made possible.
Dave and the sponsors have earned some serious street cred with me that I wont soon forget. Thanks guys!

Bdale, Carl, Bryce & JonCruz.  In the background there you can see dave hustling it.

Xara LX is going to change the landscape for open source vector compositing and possibly the entire open source desktop if they’re willing *nudge nudge.
Cedric  Gemy is such a rad dude in person.

Meeting JonCruz, ReJon and Bryce makes me wish we did keysigning. So many of us have now met in person that being obsessive compulsive about security almost seems feasable.
Look at JonCruz as he watches Marti’s LCMS talk. Thats inspiration to implement colourmanagement in inkscape brewing.
And we’re well on the way now.

I went out to dinner with the GIMP gang on my last night in Lyon and we tore up the town. Libre style.

Obligatory Koala shot.  Lyon is a beautiful city. The architecture is completely different to anything i’ve grown up with.  Oh, if you want the authentic Lyon experience book to stay at the Hotel Iris, its near the Hotel De Ville subway stop and only $50 euros per night built in an old convent.
Oh yeah,  and the following week I got to do some important ‘research’ in paris visiting galleries that I’d only read about.  Aren’t open source conferences awesome?!!

As mentioned to a few people at linux.conf.au. This is what id like to  some day spend 100% of my time on.

For a few projects i’ve been lucky enough to dip into the wonderful repositories at openclipart.org and style assets to suit my clients brand. The time / cost savings keep them interested and the fact that I slightly modify non-specic illustrations to outside of their brand keep them happy too.

So before doing a massive amount of corporate stock artwork for a client , try convincing them to let you release their assets under another style and a free license to boot. As a reward you say you’ll reduce redundant production time signifigantly by pulling stock from openclipart or your own personal assets.

Check out that diagram. (pictures dont lie) Their rightful property is their identity. There is no shame in helping someone strengthen and protect that identity.
Other people’s logos and trademarks are of no use to the community. Multi-purpose templates, illustrations and other assets are what we should be looking to keep. Wouldn’t it suck if you had to draw a briefcase and do a 3 column layout template for every client you worked for before doing anything new?  Abstract the brand from the design enough and fight for your templates back on the grounds that your clients have already leveraged benefits from public assets. You’d be suprised how much ground a little rational argument like this can give, I havent been turned down once.
So long as you can reasonably separate their brand from your assets its worth fighting to have them opened up!

I mean, for me, doing things like SVG clipart and Iconsets driven by universal stylesheets would be fantastic because they make this separation even easier when you consolidate it down to a set of palette, stoke, specularity and shading manipulators. RSVG and Inkscape have yet to support external stylesheets but the day they do: i’ll dance on the nearest desk waving a bezier pen like it was a victory sword.
I hope that rant made sense but i thought id blog it anyway

This morning i experienced some artifacts of pain while testing the XGL on my desktop. Needless to say, I turned it off and decided to wait it out for another day.

that said, the speed increase is awesome and the compiz tricks like that exposé thing and the ALT+TAB window switcher rocked my world.

Word on the street is that you’ll be able to find all this goodness in the version after ubuntu “the dapper drake” is relased.

So they say “a painters house is never finished”. I guess brisgeek is violently validating this statement.

Over the next week, i’ll be stepping up the pace of my virtual presence by revamping brisgeek, lugvegas and this weblog. Like all devs I’m using this blog as a vessel for all my tinkering, sporadic ideas and thoughts.

Hey I cant promise value for your time but there will be content.
And thats a nice change

Just a few notes for those who’d like to contact me, my address has changed and I now live in Toowong (Brisbane, QLD, AU).

• Mobile: +61 403 686 629
• Email: is my firstname at my lastname .com.au
• Jabber: is brisgeek@jabber.org
• IRC Nick: is AndyFitz on irc.freenode.net