Soluling home   Document home

Scalable Vector Graphics (SVG) Localization and Internationalization

SVG (Wikipedia) is an XML-based vector graphics file format. An SVG file can contain text, images, audio, and scripts that need to be localized. Soluling Desktop and Soluling Cloud support SVG files (.svg).

• SVG files
• IDs
• What Soluling localizes
• Right-to-left languages
• Visual preview
• Desktop process
• Cloud process
• Samples
• Configuring SVG localization

The end of the document contains links to get the full source code of the samples. After reading this document, we recommend reading a tutorial about how to use Soluling.

SVG files

Most often, you localize the text of an SVG file. Here is the Simple\SimpleNoId.svg sample file.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <text x="5" y="20">Product: Skim milk</text>
  <text x="5" y="40">Price: 1,15</text>
  <text x="5" y="60">On sale: false</text>
</svg>

Soluling extracts the three strings. When Soluling builds the localized file, it writes it into a language subdirectory next to the original file. Here is the Finnish file, Simple\fi\SimpleNoId.svg.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <text x="5" y="20">Tuote: Rasvaton maito</text>
  <text x="5" y="40">Hinta: 1,15</text>
  <text x="5" y="60">Alennusmyynti: ei</text>
</svg>

The structure of the Finnish file is identical to the structure of the original file. Only the text has been translated. Soluling localizes the text of text, tspan, and textPath elements, and the title and desc elements.

IDs

SVG does not require an id attribute in the elements. If an element has no ID, Soluling generates the ID of the string from the element name and its index, such as text[0]. This works, but if you add or remove elements, the indexes and the IDs change. Soluling then removes the old rows and adds new ones, and you lose their translations unless you copy them (e.g., with Translate Duplicates). To avoid this, add an id or xml:id attribute to every element that contains localizable data.

<text x="5" y="20">Product: Skim milk</text>

Add an id attribute.

<text id="text1" x="5" y="20">Product: Skim milk</text>

The Simple\Simple.svg sample has IDs, and Simple\SimpleNoId.svg does not.

What Soluling localizes

By default, Soluling localizes text, images, and audio. You can also localize colors, coordinates, font names, and font sizes. Select the data types on the Data types sheet.

Images, sounds, and videos

SVG uses media elements, such as image and audio, to include images, sounds, and videos. The xlink:href attribute specifies the data in one of three ways. The first way is to embed the data in the attribute.

<image x="5" y="30" width="64" height="64" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeA..."/>

The data begins with a header that specifies the format and the encoding. Soluling supports base64, base32, hex, and URL encoded data. The second way is to refer to a local media file.

<image x="5" y="120" width="64" height="64" xlink:href="../../Common/64x64/car_sedan_green.png"/>

The third way is to refer to a media file on a web server.

<image x="5" y="210" width="64" height="64" xlink:href="https://raw.githubusercontent.com/soluling/I18N/master/Samples/Common/64x64/car_sedan_red.png"/>

Soluling reads the data in all three cases. When it builds a localized SVG file, it replaces embedded data with the localized data. If the original data is a local file, Soluling creates a localized media file and refers to it, or embeds the localized data if you check Embed localized media data on the Write options sheet. If the original data is on a web server, Soluling always embeds the localized data. If you do not localize the media, the localized file refers to the same file as the original file.

Scripts

If your SVG file contains scripts, Soluling can localize the strings of the scripts too. Use the Tags sheet to configure which strings of the scripts to localize. Read more about script localization.

Colors

In most cases, you do not need to localize colors if you choose the original colors carefully. However, sometimes an element of a localized file needs a different color. SVG can specify a color by a name, such as red, or by an RGB value, either in #RRGGBB notation, where RR, GG, and BB are hexadecimal values, or in rgb(r,g,b) notation, where r, g, and b are decimal values. The following table contains some colors in each notation.

Fonts

Like colors, you rarely need to localize fonts. If you do, check Font name or Font size on the Data types sheet. If font-family contains several fonts, Soluling extracts each font name.

Right-to-left languages

The direction attribute (W3C) sets the text direction of an element and its child elements. If the value is rtl, the text is bidirectional and flows from right to left.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" direction="rtl">

When Soluling builds a localized SVG file for a right-to-left language, such as Arabic or Hebrew, it does the following by default:

• Adds direction="rtl" to the root svg element if the element does not have a direction attribute. You can turn this off on the Write options sheet.
• Reverses the existing direction attributes: ltr becomes rtl, and rtl becomes ltr. You can change this on the Options sheet.

Here is the BiDi\Simple.svg sample and its Arabic file.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 400 400">
  <text id="text1" x="5" y="20">This is a sample</text>
  <text id="text2" x="5" y="40" direction="ltr">This is a sample</text>
  <text id="text3" x="5" y="60" direction="rtl">This is a sample</text>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 400 400" direction="rtl">
  <text id="text1" x="5" y="20">هذا مثال</text>
  <text id="text2" x="5" y="40" direction="rtl">هذا مثال</text>
  <text id="text3" x="5" y="60" direction="ltr">هذا مثال</text>
</svg>

Visual preview

Soluling Desktop has a visual preview. It shows the localized file, so you can quickly check how the localized items look.

Desktop process

1. Start Soluling. Drag the SVG file (e.g., Simple.svg) on Soluling or click the New from File or Files button and select the file.
2. Project Wizard appears. Select the original language and the target languages, for example, Finnish, and complete the wizard.
3. Translate the project.
4. Choose Home | Build All to build the localized SVG files, for example, fi\Simple.svg.

When you change the original SVG file, open the Soluling project and choose Home | Scan. Soluling keeps the existing translations, and you only translate the strings that were added or changed.

Cloud process

With Soluling Cloud, you localize the SVG file in your browser: upload the file, translate it in Translate, and download the localized files. You need a Soluling account. See the available Cloud plans.

Create a project

1. Sign in at www.soluling.com and open Cloud > Dashboard for Projects, Users and Terminology.
2. Click Add a new project, then Select files and pick the SVG file (e.g., Simple.svg), or drag and drop the file onto the page. Click Create.
3. On the next page, check the project's Name. It defaults to the file's name.
4. Set the Original language to the language of the file, for example, English.
5. Under Target languages, check the languages you want to translate to, for example, Finnish and Arabic.
6. Under Source type, select Scalable Vector Graphics (SVG) file (.svg).
7. Click Create. The project appears on the dashboard, and its status changes to Ready once the file has been processed.

Translate the project

Click the project's green Translate button on the dashboard. Translate opens the project, and you can type the translations into the grid. Machine translation suggestions, translation memory, and spell checking are available there. You do not have to finish every language before moving on to the next step.

Get the localized files

1. In Translate's top bar, click the project's name. It opens the project's Manage page, the same page that the project's Manage button on the dashboard opens.
2. If you have translated something since the localized files were last built, the page says Localized files need to be built. Click Build localized files and wait until it finishes.
3. The Files section lists the SVG file with a download button for each target language. Save each localized file where your application or web site uses it, for example, fi\Simple.svg.

Update the project

When you change the SVG file, upload the new original file, translate what is new or changed, and download the localized files again. On the dashboard, click the project's Update file button (the upload arrow), select the new file or drop it onto the page, and click Update. Existing translations are kept, so you only translate the strings that were added or changed.

The dashboard is one of four ways to use Soluling Cloud. You can also use the SoluCLI command-line tool, Soluling Desktop, or SoluMake, which can run the update and build steps in your build pipeline. See the Cloud tutorial for all of them.

Samples

GitHub and <data-dir>\Samples\SVG contain the following samples. Each .ntp file is a Soluling project that localizes the SVG file of the same name into Finnish. The localized files are in the fi subdirectory after you build the project.

Configuring SVG localization

You create an SVG localization project by adding an SVG file (e.g., D:\Sample\Simple.svg) into your Soluling project. You can configure how to localize your SVG file by selecting the item in the project tree, right-clicking, and choosing the Options menu. A source dialog appears that lets you edit the options. This source uses the following option sheets.

• File
• Options
• Tags (when the file contains scripts)
• Data types
• Output
• Write options

Read more about other data files such as XML, XSL, JSON, YAML, INI, Excel, SVG, TMX, XLIFF, text and binary files.