Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

SVG <switch> Element

  • Last Updated : 27 Oct, 2020

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

<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. 






<!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
  • Edge
  • Firefox
  • Safari
  • Internet Explorer
  • Opera



My Personal Notes arrow_drop_up
Recommended Articles
Page :