SVG <switch> Element

The SVG <switch> element is used to draw text in SVG images.

The switch element evaluates the attributes requiredFeatures, requiredExtensions, and systemLanguage on its direct child elements in order, then processes and presents the first child element evaluated as true. Other child elements will be bypassed and not presented. If a child element is a container element, such as a <g> element, the entire subtree will be processed and presented or all bypassed and not presented.

Note: The values of the display and visibility attributes are not effective for the processing of the switch element. In particular, setting the display to none on the child elements of the switch element does not affect the true/False test processing does not work.

Switch Element

The <switch> element allows you to display different shapes based on the language used by the SVG viewer user. Typically, you will use the <switch> element to display different text, but you can also display different shapes.

This is an example of an SVG <switch> element:

<switch>
　　　　<g systemLanguage="en-UK">
　　　　　　　　<text x="10" y="20">UK English</text>
　　　　</g>
　　　　<g systemLanguage="en">
　　　　　　　　<text x="10" y="20">English</text>
　　　　</g>
　　　　<g systemLanguage="es">
　　　　　　　　<text x="10" y="20">Spanish</text>
　　　　</g>
</switch>

The <switch> element inside the <g> element will be displayed according to the user's selected language. The browser will use the first matched language. Only matches on language codes are considered matches, so dialects (such as en-UK）should be placed before general languages (such as en).