Chapter 5 Text Processing

Extract

Internationalization

  SVG has some great features that support internationalization of your SVG images including full support for Unicode character encoding and support for multiple languages via the ‘switch’ element.  

Character encoding

Unicode is an ISO standard that supports a wide-range of languages through character codes.  You are probably already familiar with some common character encodings such as HMTLs “ ” that represents a space character.  This is a Unicode character code.  The goal of Unicode is to provide character encodings for every character of every known written language.  The Unicode standard already defines sets of characters that represent characters from hundreds of languages from across our planet. 
 SVG provides full support for Unicode as well as other character encoding methods.  For your convenience we have provided a reference table of Unicode characters from the HTML specification in Appendix E.

switch

The switch element provides a means of allowing the users systems settings to determine the language of the SVG images text content.  This example demonstrates how to include support for multiple languages using the switch element and the systemLanguage attribute.

Figure 5-19.  Demonstration of the switch element

( view this example as svg )

<svg width="350" height="300">
<!— Text bubble à
<path transform="translate(-150 -80)"
      d="M314.669 164.186 C320.812 160.386 324 153.585 324 148.857
L324 117.286 C324 108.844 313.907 102 301.457 102
L204.543 102 C192.093 102 182 108.844 182 117.286
L182 148.857 C182 157.299 192.093 164.143 204.543 164.143
L285.024 164.143 L276.175 188 z"
fill="white" stroke="black" stroke-width="3"/>
<switch>
<!— OS system language set to German. à
<text systemLanguage="de" x="40" y="50" fill="black" font-size="12" font-family="Verdana">
        <tspan dy="-5">Die Liebe geht</tspan>
        <tspan x="40" dy="20">durch den Magen.</tspan>
      </text>
<!— OS system language set to English. à
<text systemLanguage="en" x="40" y="50" fill="black" font-size="12" font-family="Verdana">
        <tspan dy="-5">Love comes</tspan>
        <tspan x="40" dy="20">through the stomach.</tspan>
      </text>
<!— OS system language set to French. à
      <text systemLanguage="fr" x="40" y="50" fill="black" font-size="12" font-family="Verdana">
        <tspan dy="-5">L'amour va</tspan>
        <tspan x="40" dy="20">par l'estomac.</tspan>
      </text>
<!— OS system language set to Spanish. à
<text systemLanguage="es" x="40" y="50" fill="black" font-size="12" font-family="Verdana">
        <tspan dy="-5">El amor viene a</tspan>
        <tspan x="40" dy="20">traves del estomago.</tspan>
      </text>
</switch>
</svg>

 When the users system language is set to German then the SVG images will render the first screenshot and if the users system language is English then the content of the second screenshot will be displayed.  This shows the true power of SVG in how it can produce a variety of graphics on the clients-side based on the users system and preference settings.   

More information on support for internationalization on the Web can be found at these websites.
RFC document: http://www.ietf.org/rfc/rfc3066.txt 
System language country codes:  http://www.din.de/gremien/nas/nabd/iso3166ma/codlstp1/index.html