Text editing

Note that instead of using a graphics editor, you can use any text editor capable of using UTF-8. Find text to translate by searching for <text> tags. In some cases this might be a path for more advanced users as text coordinates adjustments might be needed and some more advanced "garbage" might decrease readability of the SVG.

Using real text

Only real text, in the form of the SVG <text> element, can be translated. Do not use paths in place of text.

Anchoring the text correctly

To make sure text placement "just work" in the translated versions, you should properly use the anchoring functionality of the SVG format and your editor. In most editors (including Inkscape), the function is decided by the typographic alignment option. Anchoring decides how the position of the text is specified. Anchoring to the center means the coordinates specified is the center of the text, and is used in most editors for centering.

By saying "properly use", we mean that the way you anchor it matches the actual design intentions. For example, to center some text on a pyramid, you use the centering anchor while putting the anchor point itself at the middle of the shape. To position a label for something on its right, use the "end" (right-hand-side) anchor. The "align and distribute" option in Inkscape DOES NOT change your anchoring options; it only moves the elements around.

(Yes, the "end" anchor is only on the right for left-to-right languages. A translation tool should probably invert it for RTL languages.)

Using numbers instead of labels

On images with few labels, an alternative is to have only one file with numeric labels in it and a table below, with different translations, and there is thus a single image that can be used for all languages. Image:Robal.png is a good example.

If you think this image will be better with numbers instead of translated text, you can change {{Translate}} template to {{Convert to international}} or make numbers yourself.

For instance, Image:ISS configuration sep-2006 en.svg has English labels, and a version with numeric labels Image:ISS configuration sep-2006 numbers.svg was created by replacing the labels in the English version. But it's still not fully internationalized, because title and date are still written in the image in English.

Coding

When you have a <switch> element, its children (sub-elements) represent possible choices. The children of the switch should have a systemLanguage attribute that specifies the language(s).^[1] SVG sequentially looks at each child; if there is a systemLanguage attribute and it does not match, SVG moves on to the next child. If the systemLanguage attribute matches or is not present, then SVG renders that child and does not look further. Omitting the systemLanguage attribute from the last child will implement a default rendering.

Note: The order is important! All children following the child with the omitted systemLanguage are ignored and have no effect!

<switch transform="translate(100,200)">
  <text systemLanguage="en">Population pyramid of Russia (2010)</text>
  <text systemLanguage="de">Alterspyramide von Russland (2010)</text>
  <text systemLanguage="ru">Половозрастная диаграмма России (2010)</text>
  <text>Population pyramid of Russia (2010)</text>
</switch>

Even if the default rendering is English, it is good practice to place an explicit systemLanguage="en" with the same text. The language matching rules can give unexpected behavior when the file is opened in a browser configured for multiple languages. If the languages do not follow the same sequence in each switch, then a browser may display a mix of languages. In addition, the language matching rules will change in SVG 2.0.

You can also have a systemLanguage attribute on an element that is not a child of a switch element. In this case the element will only be rendered if the language matches. Otherwise the element in question will not be displayed.

Currently, only a few graphical editors support language switches in SVG, so you may need to edit the SVG file with a text editor. The SVG Translate may be used if the SVG file follows specific conventions.

The different text translations will have different lengths, so the text anchor point should be chosen carefully. The text-anchor attribute can be set to start (left justified in most languages), middle (centered), or end (right justified). The text elements default to x="0" and y="0", so the switch element can set the text anchor point with transform="translate(100,200)".

When rendering a multi-lingual SVG image on a MediaWiki page, the language to use can be specified using syntax like [[File:SystemLanguage.svg|lang=de]]. The attribute "lang" is optional; if it is missing, MediaWiki will attempt to use the wiki's default language or fallback to English ("en").^[2]

Note: If a switch element has an English-language clause (systemLanguage="en") and a default language clause (no systemLanguage attribute), then MediaWiki will display the English-language clause.

Setting up multiple translations within one SVG file with Inkscape

Inkscape does not support the addition of language switches, but they are recognized as a "Conditional Group". Editing with text editor is required. To start using the switch element in Inkscape, the following steps are:

1. Always, in a new drawing, you need to add the two tags of <switch>...</switch>. In a new drawing, or in a previous localized drawing, you will have to add the items (usually text to localize) between these two tags and with systemLanguage assigned.
2. In drawings that use labels and arrows, it can often happen that (depending on the language) the labels and arrows position is not the most appropriate. You can correct it, after the previous step, directly with Inkscape. But if you need to change the text or arrows of a language that is not what Inkscape has configured, you must first change the Inkscape interface. To change the language of the Inkscape interface: from the menu bar, select "Edit|Preferences..."; then in the opened window, in the second group ("Interface") change the language. You can look at the code from the last example, above (SystemLanguageArrows.svg). Note: In the examples, the ID names of the objects have been changed in order to be followed more easily.
3. For the previous changes, you must be careful about the changes you make, otherwise Inkscape will not show what you want. If this is the first time you do it, first try changing the examples above. Sometimes the Inkscape XML editor ("Edit|XML Editor...") can be useful for you to find an error in your changes.

Viewing

Most browsers support viewing SVG files with switch elements. The browser will display the languages according to the browser's default language settings. If one wants to view a different language, then change the language of the browser and restart it.

Another way of viewing the file is to upload it to File:Test.svg and select the desired language from the dropdown list.

See also

• German tutorial
• The 'switch' element W3C
• The 'systemLanguage' attribute W3C
• Example files using <switch> element
• SVG Processing: Efficient Language Translation by Bryan Schnabel, 2009 (Multiple file (XLIFF) rather than switch element approach.)
• Category:Language-neutral