Guide to SVG requiredFeatures and systemLanguage

Scalable Vector Graphics (SVG) includes a conditional processing mechanism that allows elements to be rendered or bypassed based on browser capabilities and user preferences. By utilizing conditional attributes such as requiredFeatures and systemLanguage—often in combination with the SVG <switch> element—developers can create dynamic, localized, and backward-compatible vector graphics. This article explains how these attributes function, how their boolean logic is processed, and their practical implementation within modern web standards.

SVG Conditional Processing Overview

SVG conditional processing evaluates a set of predefined attributes on an element to determine whether that element should be rendered. If any conditional attribute on an element evaluates to false, that element and its children are not rendered.

When elements with conditional attributes are placed inside a <switch> container, the SVG engine evaluates its direct children in order from top to bottom. The engine renders the first child element whose conditions evaluate to true, ignoring all subsequent sibling elements regardless of their evaluation status.

The systemLanguage Attribute

The systemLanguage attribute controls rendering based on the user’s configured language preferences.

• Syntax: Accepts a comma-separated list of language tags defined by BCP 47 (for example, systemLanguage="en, en-US, fr").
• Evaluation Logic: The attribute evaluates to true if one of the language tags in the list matches any of the language preferences configured in the user agent or operating system. If the user’s primary or secondary language matches an entry in the list, the condition passes.
• Exact Matching: Language matching follows standard prefix rules. A specification of en matches en-US, en-GB, and general English settings.
• Primary Use Case: Creating multi-lingual graphics, such as diagrams, maps, or charts with text labels that adapt automatically to the user’s language without requiring separate graphic files or JavaScript.

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <switch>
    <!-- Displayed if system language is French -->
    <text x="20" y="50" systemLanguage="fr">Bonjour le monde</text>
    
    <!-- Displayed if system language is Spanish -->
    <text x="20" y="50" systemLanguage="es">Hola Mundo</text>
    
    <!-- Fallback if no matching language is found -->
    <text x="20" y="50">Hello World</text>
  </switch>
</svg>

The requiredFeatures Attribute

The requiredFeatures attribute checks whether the user agent supports specific SVG feature sets or capabilities defined in the SVG specification.

• Syntax: Accepts a whitespace-separated list of feature strings (URI identifiers), such as http://www.w3.org/TR/SVG11/feature#SVG-animation.
• Evaluation Logic: The attribute evaluates to true only if the user agent supports all of the feature strings listed. If even one specified feature is unsupported, the attribute evaluates to false.
• SVG Specification Status: requiredFeatures was heavily used in SVG 1.0 and SVG 1.1 specifications to distinguish between basic profiles (SVG Tiny, SVG Basic) and full SVG engines. In SVG 2, requiredFeatures is deprecated because modern browsers generally provide uniform SVG implementation, and feature detection has shifted toward CSS @supports rules and JavaScript API checks.

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <switch>
    <!-- Rendered only if declarative SMIL animation is supported -->
    <circle cx="50" cy="50" r="40" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Animation">
      <animate attributeName="r" values="40;20;40" dur="2s" repeatCount="indefinite"/>
    </circle>
    
    <!-- Static fallback element -->
    <circle cx="50" cy="50" r="40" fill="gray"/>
  </switch>
</svg>

Combined Conditional Evaluation Rules

When multiple conditional attributes—such as systemLanguage, requiredFeatures, and requiredExtensions—are declared on the exact same element, they operate using a logical AND rule:

1. The element evaluates systemLanguage.
2. The element evaluates requiredFeatures.
3. The element only renders if every specified conditional attribute evaluates to true.
4. If omitted, a conditional attribute defaults to true.