SVG <switch> Element

The <switch> SVG element is used to evaluate attributes on its direct child elements in order and then renders the first child where these attributes evaluate to true. Other remaining children will not be rendered.

Syntax:

<switch attribute="" >
    <child 1>
    <child 2>
    <child 3>
    <child n>
</switch>

Attributes:

Global Attributes: some global attributes used like core attributes and styling attributes, etc.

Example: Getting System Language using <switch> element.

html

<!DOCTYPE html>

<html>
 
<body>

    <svg viewBox="0 -20 100 50">

        <switch>

            <text systemLanguage="en-us">

                US English

            </text>

            <text systemLanguage="en-au">

                Australian English

            </text>

            <text systemLanguage="en">

                Global English

            </text>

            <text systemLanguage="es">

                Spanish | Espanol

            </text>

        </switch>

    </svg>

</body>
 
</html>

Output:

Supported Browsers: The following browsers are supported by this SVG element:

Chrome 1 and above
Edge 12 and above
Firefox 4 and above
Safari 3.1 and above
Internet Explorer 9 and above
Opera 8 and above

Article Tags :

HTML

Web Technologies

HTML-SVG

SVG-Element