Un panneau explicatif conçu pour un public international doit afficher le bon texte selon la langue du visiteur, sans dessiner deux fois la même icône ni superposer toutes les traductions à l'écran en même temps. Choisir la bonne version au bon moment, directement dans le SVG, est exactement le problème que résout <switch>.
Il fonctionne comme un aiguillage : il examine ses enfants dans l'ordre, retient le premier dont les conditions sont remplies, et ignore tous les autres, qui restent présents dans le code mais ne sont jamais affichés.
Définition
<switch> est un élément de test conditionnel. Chacun de ses enfants directs peut porter des attributs de test, principalement systemLanguage, et <switch> affiche uniquement le premier enfant dont le test réussit. Dès qu'une correspondance est trouvée, la recherche s'arrête : les enfants suivants, même valides, ne sont jamais évalués ni affichés. Sans aucun enfant qui corresponde, rien ne s'affiche du tout à cet endroit, sauf si un dernier enfant est laissé sans aucun attribut de test, ce qui en fait un cas par défaut systématiquement accepté.
Attributs principaux
Deux familles d'attributs de test existent, mais elles n'ont plus le même poids aujourd'hui. systemLanguage compare la langue du navigateur ou du système à une valeur, ou une liste de valeurs séparées par des virgules, par exemple systemLanguage="fr". requiredFeatures et requiredExtensions devaient à l'origine vérifier la prise en charge d'une fonctionnalité SVG précise avant d'afficher un contenu, mais SVG 2 les a retirés de la spécification : les navigateurs modernes considèrent leur test comme toujours réussi, ce qui les rend inutiles en pratique.
| Attribut | Ce qu'il teste | Fiabilité aujourd'hui |
|---|---|---|
systemLanguage | La langue du navigateur ou du système | Bonne, largement prise en charge |
requiredFeatures | Une fonctionnalité SVG précise | Obsolète, toujours considéré vrai |
requiredExtensions | Une extension propriétaire | Obsolète, quasiment jamais utile |
Exemple de rendu concret
Un panneau de signalisation numérique affiché en France montre le texte français ; le même fichier, ouvert par un visiteur dont le système est réglé en anglais, montre le texte anglais, sans qu'aucune ligne de code ne change entre les deux visites.
<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>Le troisième <text>, sans aucun attribut de test, sert de secours : il s'affiche seulement si aucune des deux langues précédentes ne correspond au système du visiteur.
Piège classique
Compter sur requiredFeatures pour afficher une version simplifiée aux vieux navigateurs et une version avancée aux récents ne fonctionne plus depuis longtemps : tous les navigateurs actuels renvoient un test toujours réussi, donc c'est systématiquement le premier enfant qui gagne, jamais le contenu de secours pensé pour les cas anciens. Seul systemLanguage reste un test réellement utile aujourd'hui.
Cas d'usage réel
Le cas le plus solide reste une carte ou un schéma technique distribué en plusieurs langues sans dupliquer le fichier : les libellés changent selon le système du lecteur, mais les traits, les couleurs et les <path> du dessin restent un seul et même jeu de données, mis à jour une seule fois. En dehors de ce scénario multilingue, l'usage de <switch> est resté limité : la plupart des sites préfèrent aujourd'hui gérer plusieurs langues au niveau de la page HTML entière plutôt qu'à l'intérieur d'un seul SVG.
Questions fréquentes
<switch> peut-il tester autre chose que la langue ?
En théorie oui, avec requiredFeatures ou requiredExtensions, mais ces deux attributs sont retirés de SVG 2 et les navigateurs les traitent comme toujours vrais. En pratique, systemLanguage est le seul test qui a encore un effet réel.
Que se passe-t-il si aucun enfant de <switch> ne correspond ?
Rien ne s'affiche à cet endroit du SVG, ce qui peut laisser un vide silencieux et difficile à repérer. C'est pour cette raison qu'il est recommandé de toujours prévoir un dernier enfant sans aucun attribut de test, qui joue le rôle de version par défaut.
Peut-on remplacer <switch> par du CSS ou du JavaScript ?
Oui, et c'est souvent ce que font les projets modernes : détecter la langue côté serveur ou en JavaScript, puis n'injecter que le SVG déjà dans la bonne langue. <switch> garde son intérêt quand le fichier SVG doit rester autonome, sans logique de page autour de lui.