This page explains how to translate inside labels or captions in an SVG file. You are probably here because someone tagged an image with {{Translate}}. Please note that this template and its related pages is a one-man idea. If you have questions or comments about it, please use the template discussion page.

SVG is an image file format that consists of plain XML text. Therefore the text labels stored in it can be easily translated. For more information about SVG or XML, please use the links. There are Wikipedia articles in many languages.

There are different ways to translate text in SVG:

• Use a graphics editor such as Inkscape. For compatibility, save the file as "Plain SVG", not "Inkscape SVG", as the latter format may introduce errors, even though it complies with the SVG specification.
• Edit the SVG file as a text file.

For editing image in any offline editor, first download the file you want to edit, open the file in the editor, translate the labels, and then save it. When finished, upload the file to Commons under a new name.

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.

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

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

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.

When creating a translated version of an SVG file, it should be saved using the filename of the original file with an IETF langtag suffix. See Commons:File naming. For example, File:Gibraltar map-en.svg is the English version of File:Gibraltar map.svg.

For linking different versions of file one to another, use "other versions" templates like all in Category:Other_versions_templates. Copy one of them and use in your image.

Using the template creates a gallery of the different language versions:

Also the template {{Derived from}} will be useful to display link to original version of your localized image.

You can place multiple translations into one SVG file using the SVG <switch> element. The resulting multilingual file has the advantage of sharing graphics; if the graphics are updated, then all the languages get the updated graphics. Compare to having several translated files; an update to one of the files does not propagate to the other language versions.

However, not all graphics editors can edit the text contained in the switch element. In such cases, a graphics editor may still be used to edit the text positions and sizes (such as in Inkscape), and the SVG Translate tool at Commons can be used to add translations, and most separate text editors can be used to make changes to the texts throughout the multiple languages. Loading an SVG file with switch translations into a graphics editor and then saving it may remove all the translations. Please note that currently multi-language translations in SVG files larger than 5MB do not render properly due to a bug.

It is advisable to give an extra margin for text contained in images with switch elements, in order to allow for current or future languages that need more letters.

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.

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.

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.

• 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

SVG files use IETF language tags to specify languages. They are often referred to as BCP 47 language tags, but BCP 47 is the combination of IETF RFC 5646 and RFC 4647. The Wikimedia Foundation uses language identifiers that usually match IETF langtags, but there are some differences. For example, the IETF language tag als is for Tosk Albanian, but Wikimedia uses that tag for Alemannisch (which IETF represents as gsw). Simple English is simple in Wikimedia but en-simple in IETF. Please be aware of the distinction and use IETF language tags (not MediaWiki language identifiers) in SVG files.

You don't have to translate this part; it should be enough if this information is here in English. Users who do not yet have a version in their language will find it here, I guess.

You can support this template by translating this help page into your language and saving it as a sub-page. The template consists of three parts. For example, for the German template they are:

• The template localization page Template:Translate/de
• The help page linked from the localized template Commons:Translation possible/Mehr erfahren
• The language links list templates Template:Translate/lang and Template:Commons:Translation possible/lang for both of them

The template page should contain the template itself and the quick info text translated from the English template.

The help page (this page) in your language should be saved under the subject that you would use in your language, like "Learn more" (which I selected for English).

The language link template is the same for every version of this template. It contains all the links to existing language versions. Please add your language there and there, if you have created a new translation.

Thank you for your support!