<switch> in SVG: picking one version and quietly dropping the rest

An explanatory panel built for an international audience needs to show the right text for each visitor's language, without drawing the same icon twice or stacking every translation on screen at once. Picking the right version at the right moment, right inside the SVG, is exactly the problem <switch> solves.

It works like a signpost: it checks its children in order, keeps the first one whose conditions are met, and ignores every other one, which stays in the code but is never shown.

Definition

<switch> is a conditional test element. Each of its direct children can carry test attributes, mainly systemLanguage, and <switch> shows only the first child whose test passes. Once a match is found, the search stops: later children, even valid ones, are never evaluated or shown. If no child matches, nothing at all is rendered there, unless one final child is left without any test attribute, which then acts as a fallback that always succeeds.

Main attributes

Two families of test attributes exist, though they no longer carry the same weight today. systemLanguage compares the browser's or system's language against a value, or a comma-separated list of values, for example systemLanguage="en". requiredFeatures and requiredExtensions were originally meant to check support for a specific SVG feature before showing content, but SVG 2 removed them from the specification: modern browsers treat their test as always passing, which makes them useless in practice.

A concrete example

A digital sign shown in France displays the French text; the very same file, opened by a visitor whose system is set to English, shows the English text instead, without a single line of code changing between the two visits.

<svg viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg">
  <rect width="200" height="60" fill="#f1f5f9" rx="8" />
  <switch>
    <text x="20" y="35" systemLanguage="fr" font-size="18" fill="#1e293b">
      Sortie de secours
    </text>
    <text x="20" y="35" systemLanguage="en" font-size="18" fill="#1e293b">
      Emergency exit
    </text>
    <text x="20" y="35" font-size="18" fill="#1e293b">Exit</text>
  </switch>
</svg>

The third <text>, with no test attribute at all, acts as the fallback: it only shows up when neither of the two language versions above matches the visitor's system.

Classic trap

A real use case

The strongest case remains a map or a technical diagram shipped in several languages without duplicating the file: the labels change with the reader's system, while the lines, colours and <path> shapes of the drawing stay one single set of data, updated in one place. Outside that multilingual scenario, <switch> has stayed a niche tool: most sites now handle multiple languages at the level of the whole HTML page rather than inside a single SVG.

Frequently asked questions

In theory yes, through requiredFeatures or requiredExtensions, but both were dropped from SVG 2 and browsers treat them as always true. In practice, systemLanguage is the only test that still has any real effect.

Nothing renders at that spot in the SVG, which can leave a silent gap that is hard to notice. That is exactly why it helps to always add one last child with no test attribute at all, to act as a default version.

Yes, and modern projects often do exactly that: detect the language on the server or in JavaScript, then only inject the SVG already in the right language. <switch> still earns its place when the SVG file needs to stay fully self-contained, with no page logic wrapped around it.