Community Tech/SVG translation

This is the project page for SVG translation, the #9 wish in the 2017 Community Wishlist Survey. You can follow this page, and get updates as the Community Tech team works on this project.

This page documents a project the Wikimedia Foundation's Community Tech team has worked on or declined in the past. Technical work on this project is complete.

We invite you to join the discussion on the talk page.

Tracked in Phabricator:
Task T201207

The tool is now live at https://svgtranslate.toolforge.org/.

The aim of this project was to build a Toolforge tool that allows users to be able to translate SVG files into local languages and upload them on Commons.

The team decided to build a new tool for this project which can be accessed here.

For documentation on the tool and how to use it, please the SVG Translate tool page on Commons.

Join the Community Tech team newsletter to get periodic notifications about the team's projects and the wishlist survey.

Goal

The aim of this project is to build a tool that allows users to be able to translate SVG files into local languages and upload them on Commons.

Problem statement

This section aims to list all of the problems that exist with SVG translations on Commons. Not all of these will fall under the scope of this project but we will do our best to resolve as many problems as we can.

1. There is no easy way to translate SVG images

Jarry1250's SvgTranslate tool does not work as expected any longer.
mw:Extension:TranslateSVG project was undertaken a few years ago but it wasn't deployed anywhere and the code is not in a good shape anymore.
Editors who are familiar with SVG code or graphic editors like Inkscape or Adobe Illustrator can use those to edit files but the majority of users do not have a simple way to add translations.

2. External tools like svgtranslate are hard to discover

Anatomy of human ear

Anatomy of human ear in Hebrew

Anatomy of human ear in Tamil; Tamil translation changed graphics layout for some labels/leaders.

To illustrate how big this problem is, take a look at Anatomy of human ear. It is used on multiple non-English wikis in articles:
Users who are on the wiki and find an untranslated image on an article don't have a way to discover the translation tool.

See {{igen}} and {{translate}} on Commons

3. Creating separate file versions for every translation is problematic

It is a common practice to create new versions of files when creating translations instead of using the switch statement syntax to add translations to the same file. This leads to the translated files not being updated when the original file is.

For example, the Anatomy of human ear file was updated to show the cochlear frequency mapping but the translated files (like this Japanese version) are still showing the old labels.

If new file versions aren't linked to one another, it becomes hard to discover files and users might end up re-translating them.

4. Files containing multiple translations may not be supported by graphical editors

It appears that not all graphic editors support switch statements and their systemLanguage attributes to include multiple translations in the same file. This can lead to the translations being thrown away or corrupted when the files are edited in such editors.

5. SVG 1.1 does not have automatic line breaking

Wrapped lines break into separate translation units — in this case, "Collective" and "Municipality" are treated as two separate words rather than a single two-word phrase.

When lines are broken, images may use separate text elements rather than one text element with several tspans. This leads to the translation code thinking that they are separate translation units.
When lines are broken, an intervening space may not be present: instead of "Atlantic Ocean" one may get "AtlanticOcean".
<text x="100" y="50">Atlantic<tspan x="100" y="70">Ocean</tspan></text>

A quick and dirty check is load the SVG file into a browser, select all, and then paste the text into an editor.

6. Long translations do not fit

Often the SVG file has English labels which fit well but other language translations might get too long and not fit in the space provided.

Map of Septimania in English
Map of Septimania in Russian - note that the translation for the word Septimania is a tight fit

7. MediaWiki defaults to serving English translations for SVGs on all wikis

Even if translations for an image exist, they will not show up until the user adds the lang attribute to the image.

For example if a user wants to include a file on German wikipedia they will have to write [[File:example.svg|lang=de]] so that it shows up in German language on the wiki.

8. Sometimes parts of SVGs should not be translated

There are cases when an SVG has phrases which should not be translated/translatable. An example would be an SVG where an English phrase is being translated into another language as a way of teaching. In that case, the English phrase should not be translatable. Similarly math/chemistry equations and diagrams may contain labels that should not be translatable.
As an example, in Map Tenerife Disaster EN, the names of airlines and runway numbers should not be translated (as is already followed by translators).

Proposed solution

Minimum Viable Product (MVP) features:

A tool on Toolforge that...

Allows a user to find a file on Commons
- The tool accepts a file URL and auto-completes SVG file names from Commons, if the user starts typing.
- Once the user selects the file, the tool opens the file up in the translate view, where it can be translated.
Allows a user to add a new language translation
- The user can select what language they want to translate from.
- The user can select what language they want to translate to.
- The user is presented with labels for entering the translations.
Allows a user to view and edit previously existing translations
- The user can see which languages translations are already present
- If there are existing translations for a language that user wants to translate to, they get pulled in and are modifiable in the interface.
Allows a user to preview the file
- The user can hit preview at any stage during the translation process and see the translated labels appear in the image. (Dependent on technical feasibility)
Allows a user to login to the tool using OAuth
- User can login to the tool at any point and the tool will hold on to all their translations.
Allows a user to upload the file to Commons under their account (using OAuth)
- This action would be disallowed until the user has added translations for all labels.
- This action would be disallowed until the user has logged in.
- This creates a new version of the same file (translations saved using switch) and leads user to commons where they can input the description/file changes.
Allows a user to download the file with the new translation
- The user can download the file at any stage (even if all the labels are not translated)

Non-user facing features

Translations are added to the same SVG file using switch syntax.
tspan tag labels in a text tag are merged and presented to the user as one translation unit.

An on-wiki gadget that...

Generates a link to the tool for every image in this category on commons.
Is customizable to be used for any given wiki and category

Non-MVP features

These features would be prioritized after the features in the MVP are built and the tool is ready for community use.

In-tool discoverability for files to translate
Recently uploaded/previously edited files in the tool
Ability to modify text-anchor coordinates for labels
Auto-preview for translations in the image
Thumbnail previews when selecting images
Suggestions for translations
Ability to add multiple translations at the same time
Ability to mark labels as non-translatable

Mockups

Early-stage wireframes

Link to tool from wiki
Find image on the tool
Translation view on the tool
Translate from
Translate to
OAuth login

User workflows

This section aims to list all the user workflows around translating SVGs on Commons. If you know of a workflow that's not documented here, tell us about it on the talk page!

A user who is only interested in translating a specific image because they are writing an article in a specific language and would like to translate a relevant language.
- This user should be able to click on a link on the file page/input the image URL/have the tool auto-complete the image name when they start typing and be able to start translating.
A user who is a casual translator to a specific language (say Malayalam) and is looking for SVG files not translated to Malayalam, which are either generally available anywhere in the Wikimedia ecosystem, or specifically used on Malayalam wikis.
- This user would want to see an interface which allows them to discover images to translate.
A user who finds a translated image but wants to edit the translation
- This user would like to go in to the tool and be able to edit previously saved translations for an image.
A user who's interested in maintenance work and seeks to combine separate language version files into single files using switch syntax
- This user would like for the tool to be able to provide some automation around finding these files and combining them.

Status

If you are interested in getting notifications for important announcements about our projects, you can subscribe to the Community Tech newsletter.

June 5, 2019

The tool is now live at https://tools.wmflabs.org/svgtranslate/ and is working well for most files. You may still encounted occasional bugs because of quirks in SVG files. Please don't hesitate to reach out to us or file a bug if you encounter a major problem. Thank you to everyone who has helped this project along.

February 14, 2019

The tool is nearing completion. The beta version of the tool links to commons-beta. You can freely add and upload images there without risking breaking anything. The production version of the tool is under testing right now and you will be able to use it once we are sure it is devoid of major bugs. Please leave feedback on the talk page!

November 29, 2018

It is now possible to render SVGs in wiki language instead of always rendering them in English. Now you no longer need to specify the lang parameter to render the SVG in the wiki language. If the file is available in the wiki language, it automatically gets displayed in that language. Otherwise it defaults to English. This is especially useful in cases when files are added to pages first and translated later. Once the translation becomes available, the image automatically renders in the wiki language. This holds for switch-translated SVG files, of course.
As an example, you can look this file -

This work was done in response to Problem statement 7 described above which came up in discussions.

August 30, 2018

We're seeking input on the early stage wireframes for the tool. The product designer (PSaxena (WMF)) is working on a prototype for the tool that we will share with the community soon to get more feedback.

August 15, 2018

The team discussed the potential ways forward on this project and unanimously voted in favor of building a new Toolforge tool for this project (while pulling relevant code as needed from the svgtranslate codebase). Here are some of the reasons that influenced our decision:

Building an external tool would allow us to move a lot faster and deliver more impact on the project without getting bogged down by a lot of tech-debt work in fixing up outdated code.
Having a standalone codebase would allow volunteer developers to get involved and take over the project once it's complete.
It gives us more flexibility in terms of both the interface and functionality the tool can have.
Translating SVGs isn't a functionality that is specific to our projects. It can be used by anyone for any SVG.
As a tool, we'd be able to design it such that it works well in a mobile interface and allows for our users to make micro-contributions.

August 9, 2018

The Community Tech team is deciding upon a direction for this project in task T201207 to see what's the best way to deliver the most features to the users while being cognizant of the time constraints this team operates under. If you have opinions on that, let us know either on the talk page or on the phabricator ticket. Thank you.

July 23, 2018

We are beginning to do an investigation into this proposal in order to explore possible solutions and their pros and cons.

March 16, 2018

No progress as been made on this, as we are currently focusing on other Wishlist projects. We anticipate we will begin development in the second half of 2018.

February 23, 2018

We took this investigation out of our sprint, as we want to limit our projects in process by completing what's already started before starting anything new. No estimated date yet.

February 21, 2018

We are still awaiting a technical investigation for this project. The ticket is in our current sprint and we hope to complete it by the end of March. After the investigation we will be able to decide on project requirements.

January 4, 2018

The existing tool (https://tools.wmflabs.org/svgtranslate/) currently does not allow for download/upload (and is therefore useless.) There is also an extension. It appears that the biggest problem with the tool is that it depends on the translate extension with custom patches, that are five years old. Just fixing the Tool Labs tool is probably the easiest way forward. Should be easy to work with.

Research to do:

Figure out implementation
Decide what to build

December 13, 2017

The team will start investigating this project early in 2018. If you've got suggestions or questions, please write your thoughts on the talk page!

Important links

Wishlist proposal, discussion and votes
Phabricator tickets tracking the work: phab:T56214
- Investigation: T184310
wikitech:Tool:SVG Translate – deployment documentation

The tool is now live at https://tools.wmflabs.org/svgtranslate/.