Tech and Media Labs
This site uses cookies to improve the user experience.




SVG switch element

Jakob Jenkov
Last update: 2014-06-15

The SVG <switch> element is used to draw text in an SVG image.

Switch Element

The <switch> element enables you to show different shapes depending on what language the user of the SVG viewer is using. Typically you would use the <switch> element to show different texts, but you can also show different shapes.

Here is an SVG <switch> element example:

<switch>
    <g systemLanguage="en-UK">
        <text x="10" y="20">UK English</text>
    </g>
    <g systemLanguage="en">
        <text x="10" y="20">English</text>
    </g>
    <g systemLanguage="es">
        <text x="10" y="20">Spanish</text>
    </g>
</switch>    

Depending on the language chosen by the user, one of the <g> elements inside the <switch> element will be displayed. The browser will use the first language matching. A match on language code alone is also considered a match, so put dialects (like en-UK) before general languages (like en). Here is the resulting image:

UK English English Spanish

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC