<switch>

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

CategoriesContainer element
Permitted contentAny 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

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

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
switchChrome Full support 1Edge Full support 12Firefox Full support 4IE Full support 9Opera Full support 8Safari Full support 3.1WebView Android Full support 3Chrome Android Full support 18Firefox Android Full support 4Opera Android ? Safari iOS Full support 3.1Samsung Internet Android Full support 1.0
allowReorder
DeprecatedNon-standard
Chrome ? Edge ? Firefox No support ? — 50IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android No support ? — 50Opera 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.