SVG <switch> Element

Last Updated : 16 Jun, 2022

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>