The <switch>
SVG element evaluates any requiredFeatures
, requiredExtensions
and systemLanguage
attributes on its direct child elements in order, and then renders the first child where these attributes evaluate to true. Other direct children will be bypassed and therefore not rendered. If a child element is a container element, like <g>
, then its subtree is also processed/rendered or bypassed/not rendered.
The display
and visibility
properties have no effect on <switch>
element processing. In particular, setting display:none
on a child has no effect on the true/false testing for <switch>
processing.
Usage context
Categories | Container element |
---|---|
Permitted content | Any number of the following elements, in any order: Animation elements Descriptive elements Shape elements <a> , <foreignObject> , <g> , <image> , <svg> , <switch> , <text> , <use> |
Attributes
Global attributes
- Conditional processing attributes
- Core attributes
- Graphical event attributes
- Presentation attributes
class
style
externalResourcesRequired
transform
DOM Interface
This element implements the SVGSwitchElement
interface.
SVG <switch> example
This example demonstrates showing different text content depending on the browser's language settings. The switch
element will display the first of its child elements whose systemLanguage
attribute matches the user's language, or the fallback element with no systemLanguage
attribute if none of them match.
HTML Content
<svg viewBox="0 -20 100 50"> <switch> <text systemLanguage="ar">Ω Ψ±ΨΨ¨Ψ§</text> <text systemLanguage="de,nl">Hallo!</text> <text systemLanguage="en-us">Howdy!</text> <text systemLanguage="en-gb">Wotcha!</text> <text systemLanguage="en-au">G'day!</text> <text systemLanguage="en">Hello!</text> <text systemLanguage="es">Hola!</text> <text systemLanguage="fr">Bonjour!</text> <text systemLanguage="ja">γγγ«γ‘γ―</text> <text systemLanguage="ru">ΠΡΠΈΠ²Π΅Ρ!</text> <text>βΊ</text> </switch> </svg>
Result
Specifications
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 The definition of '<switch>' in that specification. |
Candidate Recommendation | Clarified the evaluation of the systemLanguage attribute |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<switch>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
switch | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 8 | Safari Full support 3.1 | WebView Android Full support 3 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android ? | Safari iOS Full support 3.1 | Samsung Internet Android Full support 1.0 |
allowReorder | Chrome ? | Edge ? | Firefox No support ? — 50 | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android No support ? — 50 | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.