Open In App

SVG systemLanguage Attribute

Last Updated : 31 Mar, 2022
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

The systemLanguage attribute express a list of many supported language tags. The elements that are using this attribute includes: <a>, <altGlyph>, <animate>, <animateColor>, <animateMotion>, <animateTransform>, <audio>, <canvas>, <circle>, <clipPath>, <cursor>, <defs>, <discard>, <ellipse>, <foreignObject>, <g>, <iframe>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textPath>, <tref>, <tspan>, <unknown>, <use>, and <video>.

Syntax:

systemLanguage = "language-tags"

Attribute Values: The systemLanguage attribute accepts the values mentioned above and described below

  • language-tags: This attribute value includes tags such as: ar, de, nl, en-us, en-gb, en-au, en, es, fr, ja, ru, etc.

Below examples illustrate the use of systemLanguage attribute.

Example 1:

html
<!DOCTYPE html>
<html>

<body>

    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <svg viewBox="0 -20 300 350">
        <switch>
            <text systemLanguage="ar">مرحبا</text>
            <text systemLanguage="de, nl">Hallo!</text>
            <text systemLanguage="en-us">Howdy!</text>
            <text systemLanguage="en-gb">Wotcha!</text>
            <text systemLanguage="en-au">G'day!</text>
            <text systemLanguage="en">Hello!</text>
            <text systemLanguage="es">Hola!</text>
            <text>Sorry no language matched!</text>
        </switch>
    </svg>
</body>

</html>

Output:

Example 2:

html
<!DOCTYPE html>
<html>

<body>

    <h1 style="color: green; text-align: center;">
        GeeksforGeeks
    </h1>

    <svg viewBox="-30 -20 300 350">
        <switch>
            <text systemLanguage="ar">مرحبا</text>
            <text systemLanguage="de, nl">Hallo!</text>
            <text systemLanguage="es">Hola!</text>
            <text>Sorry no language matched!</text>
        </switch>
    </svg>
</body>

</html>

Output:


Next Article

Similar Reads