Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

SVG <switch> Element

  • Last Updated : 31 Mar, 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. 


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


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

Example: Getting System Language using <switch> element. 

<!DOCTYPE html>
    <svg viewBox="0 -20 100 50">
            <text systemLanguage="en-us">
                US English
            <text systemLanguage="en-au">
                Australian English
            <text systemLanguage="en">
                Global English
            <text systemLanguage="es">
                Spanish | Espanol


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 :

Start Your Coding Journey Now!