[Post 17 of the DITA Loc Wire series] “A picture is worth 1,000 words” says the hundred-year-old adage. As a localization service provider specialized in technical documentation, I can even claim that a picture is worth 10,000 words. We share with you some valuable tips on formatting your image for localization.
Prefer the SVG format to JPG or PNG
The image below was created in Adobe Illustrator, saved as a PNG (Portable Network Graphic), and inserted into a DITA document.
It takes ten steps to get it localized:
- Get the original AI file.
- Open the Image in Illustrator.
- Export the text in an XML format.
- Get the 48 words translated.
- Get the words reviewed.
- Re-import the text in Illustrator.
- Update the layout to allow for text expansion.
- Generate the PNG file.
- Link the new PNG file instead of the original one.
- Manage the AI and PNG files in my CMS or file structure.
In the second example, we saved the file in the SVG format and inserted it into a DITA document. As you can see, it looks identical to the PNG version:
The image is now vectorial, which means that the text is a string of characters and not a cell of pixels as in the PNG. Most importantly, translation tools can access them directly.
Localizing the SVG file only requires four steps:
- Get the 48 words translated.
- Get the words reviewed.
- Update the layout to allow for text expansion.
- Manage only the SVG file in your CMS or file structure.
Switching to the lighter SVG process only requires you to change your “save as” choice:
And you also benefit from significant features related to this format:
- It is responsive: It does not blur when you increase or decrease your resolution.
- It is searchable: Your favorite Search engine will also index the text from the images.
- It is usually lighter: The file requires fewer bytes of memory for the same quality.
Avoid carriage return, and a couple more tips
How do I know if a displayed image is vectorial?
If you can select or search within the text of an image, then it is in vectorial format.
Do I need to write in a specific manner in my graphics?
Yes, you should let the tool manage the layout. For example, if I want to write “I love the content of this post” in a box I can make the software manage the layout (1st image) or force the layout by adding carriage return (2nd image). The first option reduces the likelihood of incorrect text localization.
The two text boxes look the same; however, when I want to translate them in a CAT (Computer-Aided Translation) tool, the output is very different. In the first case, I have one segment: “I love the content of this post”. In the second case, I have three segments: “I love the”, “content of this” and “post”, which is wrong.
Is SVG the only vectorial format?
It is the most common web standard from W3C [https://www.w3.org/standards/webdesign/graphics]. Other file formats work for print, such as EPS (Encapsulated Postscript) or CGM (Computer Graphics Metafile) in the CAD environment.
Hi there, just became aware of your blog through Google, and found that it’s truly informative. I’m gonna watch out for brussels. I’ll be grateful if you continue this in future. Many people will be benefited from your writing. Cheers!
Great article! Even though SVG has been around for many, many years, and is embraced by all the big commercial applications, its value seems to be totally not understood by the community. This article does a great job of showing the what, why, and how when it comes to best practices for images especially in the translation workflow.
Hello Dominique,
Thanks a lot for these very interesting articles…
I have a question about svg files… We would like to use them but the svg generated by Visio (I know, but we do not have choice over this tool) contain a lot (usually several tens) of “internal” strings such as “Sheet.xx”, “Rectangle.xx”, “Circle.xx”, “Filter.xx”… even for a simple drawing… These prevent us to translate svg files as it is really too time consuming to check all those segments…
Do you have an idea how to filter / clean such svg files to retrieve only the useful text strings in my CAT tool?
And, of course (and unfortunately), your step “3. Update the layout to allow for text expansion.” is an issue on large projects and multiple languages as the translated svg must be checked / modified after each iteration of the project and its translation
I’m already looking forward for your next article