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:

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

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

Featured Videos


Java Persistence
Close TOC

All Trails

Trail TOC

Page TOC