Web Advent Calendar 2024

SVG has a language switch

Inside of a SVG, you can use a switch element, whose systemLanguage attribute gets evaluated.

The first element which matches the browser language gets rendered.

<svg viewBox="0 20 100 50">
  <switch>
    <text systemLanguage="de">Hallo!</text>
    <text systemLanguage="en-us">Howdy!</text>
    <text systemLanguage="en-gb">Wotcha!</text>
    <text systemLanguage="en">Hello!</text>
    <text systemLanguage="es">Hola!</text>
    <text systemLanguage="fr">Bonjour!</text>
    <text systemLanguage="ja">こんにちは</text>
    <text>☺</text>
  </switch>
</svg>

Result:

Hallo! Howdy! Wotcha! Hello! Hola! Bonjour! こんにちは

Source: https://developer.mozilla.org/de/docs/Web/SVG/Element/switch