Merge pull request #41605 from Nordix/image-translation-guide/mohammed

Add guide for translating SVG images

Author: k8s-ci-robot

content/en/docs/contribute/localization.md

@@ -361,6 +361,48 @@ extensive human review to meet minimum standards of quality.
 To ensure accuracy in grammar and meaning, members of your localization team
 should carefully review all machine-generated translations before publishing.
 
+### Translating SVG images
+
+The Kubernetes project recommends using vector (SVG) images where possible, as
+these are much easier for a localization team to edit. If you find a raster
+image that needs localizing, consider first redrawing the English version as
+a vector image, and then localize that.
+
+When translating text within SVG (Scalable Vector Graphics) images, it's
+essential to follow certain guidelines to ensure accuracy and maintain
+consistency across different language versions. SVG images are commonly
+used in the Kubernetes documentation to illustrate concepts, workflows,
+and diagrams.
+
+1. **Identifying translatable text**: Start by identifying the text elements
+within the SVG image that need to be translated. These elements typically
+include labels, captions, annotations, or any text that conveys information.
+
+2. **Editing SVG files**: SVG files are XML-based, which means they can be
+edited using a text editor. However, it's important to note that most of the
+documentation images in Kubernetes already convert text to curves to avoid font
+compatibility issues. In such cases, it is recommended to use specialized SVG
+editing software, such as Inkscape, for editing, open the SVG file and locate
+the text elements that require translation.
+
+3. **Translating the text**: Replace the original text with the translated
+version in the desired language. Ensure the translated text accurately conveys
+the intended meaning and fits within the available space in the image. The Open
+Sans font family should be used when working with languages that use the Latin
+alphabet. You can download the Open Sans typeface from here:
+[Open Sans Typeface](https://fonts.google.com/specimen/Open+Sans).
+
+4. **Converting text to curves**: As already mentioned, to address font
+compatibility issues, it is recommended to convert the translated text to
+curves or paths. Converting text to curves ensures that the final image
+displays the translated text correctly, even if the user's system does not
+have the exact font used in the original SVG.
+
+5. **Reviewing and testing**: After making the necessary translations and
+converting text to curves, save and review the updated SVG image to ensure
+the text is properly displayed and aligned. Check
+[Preview your changes locally](https://kubernetes.io/docs/contribute/new-content/open-a-pr/#preview-locally).
+
 ### Source files
 
 Localizations must be based on the English files from a specific release