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

DITA Localization Workflow It takes ten steps to get it localized:

  1. Get the original AI file.
  2. Open the Image in Illustrator.
  3. Export the text in an XML format.
  4. Get the 48 words translated.
  5. Get the words reviewed.
  6. Re-import the text in Illustrator.
  7. Update the layout to allow for text expansion.
  8. Generate the PNG file.
  9. Link the new PNG file instead of the original one.
  10. 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:

DITA Localization Workflow

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:

  1. Get the 48 words translated.
  2. Get the words reviewed.
  3. Update the layout to allow for text expansion.
  4. 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:

Screenshot-illustrator-save-as

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

 

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.
Carriage return
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.