Text editing

Note that instead of using a graphics editor, you can use any (plain text) editor capable to store the text in UTF-8 format. 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 instead of text when creating or generating a SVG (with some justified exceptions).

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.)

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 plain text editor. A good practise is to place the switches in the defs section. 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)".

CSS can be added to globally scale text for verbose or concise translations,^[2] such as:^[3]

 <style type="text/css">
text[systemLanguage="es" i] { font-size: 80%; }
text[systemLanguage="zh" i] { font-size:125%; }
 </style>

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.

Tool

• https://svgtranslate.toolforge.org

  Hint: The tool is reported as buggy. When in doubt, it is preferable to edit svg files with a plain text editor.

Use

To use the file in non-English wiki project, you can use it as usual, but with the |lang= parameter

You may also use the same method for gallery

• 
  "lang=en"
• 
  "lang=id"
• 
  "lang=zh-hans"

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").^[4]

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.

Multiple translations with symbols

It becomes more complex, if you have not only a label but additionally one ore more symbols identifying an object.

You can see in an example on the right how to do this in a clear, concise and comprehensible manner:

Define the symbols in the <defs> section, insert them into the map using a <use> statement, and then place the label (in multiple languages) relative (sic!) to the symbol with a second <use> statement.

Multiple translations with a mix of ltr and rtl languages

It looks more authentic when the icon is placed before the text within a legend. This is a challenge, if you have to handle a mixture of left-to-right and right-to-left languages. It is a matter of using an additional <switch> construction to shift the icons to either the left or right position. This results in nested <switch> statements that are quite complex.

You can see in an example on the right how to do this in a clear, concise and comprehensible manner:

Define the symbols and the switches with the translations of the labels in the <defs> section. Then group each of them in a <g> element. Then insert them both into the legends section in another <switch> construction. Do this twice, once for 'rtl' languages, then for all others ('ltr' languages). Each time with an adjusted y="4711" parameter, so that the icons are placed on the right-hand side of the legend one time and on the left-hand side the other time.

See also a more complex example.

See also Category Multilingual SVG maps