@Niharika: Please look into this.

@Jinoytommanjaly Please upload the human led bones diagram as well

These issues arise from the underlying graphics, which are less than ideal for translation.

For [[Commons:File:Sustainable development.svg]], the text elements use text-anchor:start instead of text-anchor:middle; changes to the text may alter the length and lose centering. The original graphic did not leave much room for translations; the text "Sustainable" is crowded even in the English version; graphics for translation should allow for large variations in text length.

[[Commons:File:Human leg bones labeled.svg]] has similar layout issues. The original upload used leader lines ending in a dot; the text was left-justified above the leader line (text-anchor:start). A subsequent upload moved the leader lines off the ending dots. The leaders should end at the dots. If left justification is used, then the leader lines should be extended to the left; if right justification is used, the leader lines should be adjusted so they start to the right of the text (instead of running underneath the text). The graphic has lots of whitespace on the right; shifting the image to the right would allow more space for longer labels on the left.

A tool could change the text-anchor property and adjust the corresponding text origin, but moving leader lines are graphic edits and out of scope for a translation tool. A modest facility to do that is possible. Allowing the user to change font-sizes is also possible, but such a change is going down a slippery slope. The translation efforts should be separate from the graphic design of the image. If one needs to adjust the image, that should be done with a graphics tool rather than a translation tool. For that reason, adjusting leader lines is out of scope.

The simpler view is images should be designed for translation. The text anchor should be chosen to accommodate different string lengths, and the graphic designer should have left lots of room for the translated labels.

I would close this ticket as won't fix.

In T215690#4940541, @Jinoytommanjaly wrote:

Firstly, @Jinoytommanjaly @KCVelaga I want to point out something here - please please use the correct language from the dropdown when you are adding a new language. It says "English" in the screenshot. It should not be English, but instead the name of the language you are adding. If you upload this file, it will overwrite the English labels in the file. If you are not sure how to use this tool, I will be holding a hangout session where I will demonstrate the tool and how to use it.
Secondly, like Glrx pointed out above, the tool is only meant for adding translations but in order to adjust font size and alignment, it is a much bigger undertaking and should be handled in a graphics editor.

BUT, what you are seeing in this image is a bug with the tool. The actual image on commons has smaller labels but the tool is producing larger labels. I will mark this ticket as a bug and we will work on fixing this problem. The translated labels should always be in the same size and font as the original labels in the file. Thank you for reporting it.

I understood the tool is mainly meant for adding translation purpose only and can't work as a graphics editor. Thank you @Glrx.

@Niharika, The screenshot is taken after uploading the image to commons when Krishna asked for a screenshot. Actually i have uploaded by changing Default language -> English to Default language -> Malayalam (https://upload.wikimedia.org/wikipedia/commons/archive/7/7e/20190209080140%21Human_leg_bones_labeled.svg).

I have just tried one more translation now. Even though I have selected the Malayalam language it is getting to overwrite to English file only. The first picture is taken before uploading to commons and the second one after uploading.

I have also tried to upload after changing Tool 'Language settings' to Malayalam. But the file is just overwritten.

3.

Certainly, the tool will help in translations of more SVG files easily coming months. Thank you for considering this translation tool

Just a note about the original files.

File:Sustainable development.svg has been edited to use text-anchor:middle. Translations from other versions have been inserted into switches.

Commons:File:Human leg bones labeled.svg has been corrected (eg, leader line now goes to the patella); more space has been added for translated text. A switch translation skeleton has been added.

I edited File:Human leg bones labeled.svg to clean it up and fix the leaders. Originally, the text elements looked something like:

<text style="font-size:40px;...">
  <tspan style="font-size:18px;...">Femur</tspan>
</text>

is the tool confused by the 40px to 18px change?

(if the patella leader does not go to the patella, the tool is using the old image)

@Jinoytommanjaly What do you mean when you say it is getting overwritten? I just added Hindi translations for the same file and I see them. I think you are getting confused because the translations are added to the same file. You can change the language you see by using the Render this language in dropdown box on Commons. See this link.

And see this - https://commons.wikimedia.org/wiki/Commons:SVG_Translate_tool#Using_translated_file_on_a_wiki

@Glrx Oh, that might be the problem. Thanks for all your help in fixing up these files!

@Niharika Oh, sorry. I thought the tool creates a new file with a new name added. I didn't notice that translations are added to the same image file name using switch-translations. Thanks for notifying.

I was not able to reproduce this on staging or production, using the SVGs in the description.

Lots of visual comparisons of svgtranslate and Commons was done in T215580#5115279 (and incidentally as part of other testing). While there can sometimes be differences in font rendering (probably due to rsvg), the differences are minimal.

Suggesting this is fixed.