Svg text according to the language to be used - html

Question

How can I make the text I want to show differ according to the language used.
Example if the text is in:
Spanish I would like to use the text: Hola!
Italian I would like to use the text: Ciao!
English I would like to use the text: Hi!
If no language is passed, a default one, for example English.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg height="30" width="200">
<text x="0" y="15" fill="blue">Hi!</text>
</svg>
Example for language selection, the language could be on cookie or session.
Or it could be passed as a parameter to the file name.svg?Lang=es

Answer 1

You can use a switch element. Change your browser's language settings to prefer Italian or Spanish to see the text change.
<svg width="100%" height="100%" viewBox="0 100 600 300">
<switch font-size="18">
<g systemLanguage="en">
<text x="20" y="220" xml:lang="en-US">Why can't they just speak English ?</text>
<text x="230" y="150" xml:lang="en">English (US)</text>
</g>
<g systemLanguage="es">
<text x="20" y="220" xml:lang="es-ES" font-size="18">¿Por qué no pueden simplemente hablar en castellano ?</text>
<text x="230" y="150" xml:lang="en">Spanish (ES)</text>
</g>
<g systemLanguage="it">
<text x="20" y="220" xml:lang="it" font-size="18">Perchè non possono semplicemente parlare italiano ?</text>
<text x="230" y="150" xml:lang="en">Italian</text>
</g>
</switch>
</svg>

Answer 2

In modern Browsers you can use a Custom Element to dynamically generate the SVG
Use Roberts systemLanguage to enhance the SVG
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/systemLanguage
For React you have to add extra wrapper code around every Custom Element,
React only supports this W3C standard for 71%,
all other Frameworks are 100% BFF with the W3C standard Custom Elements API
customElements.define('svg-text', class extends HTMLElement {
static get observedAttributes() {
return ["bgfill", "width", "height", "stroke", "fill", "text",
"x", "y", "fontsize", "rotate"
]; // update whenever these attributes change
}
connectedCallback() {
let [bgfill = "pink", width = 200, height = 150, stroke = "none", fill = "green",
text = "Hello", x = "50%", y = "50%", fontsize = "1em", rotate = "0"
] = this.constructor.observedAttributes.map(x => this.getAttribute(x) || undefined);
this.innerHTML = `<svg width='${width}' height='${height}'` +
`xmlns='http://www.w3.org/2000/svg'>` +
`<rect width='100%' height='100%' fill='${bgfill}'/>` +
`<text dominant-baseline='middle' text-anchor='middle' font-size='${fontsize}'` +
` x='${x}' y='${y}' fill='${fill}' ` +
` stroke='${stroke}' transform='rotate(${rotate} ${width/2} ${height/2})'>${text}</text></svg>`
}
attributeChangedCallback(name, oldValue, newValue) {
if (this.isConnected) this.connectedCallback();
}
});
// example changing attribute
setTimeout(() => {
document.querySelector("svg-text").setAttribute("text", "Ola!");
}, 21e2)
<svg-text bgfill='lightblue' fill="blue" width="100" fontsize="3em" height="100">
</svg-text>
<svg-text fill="green" width="75" height="25" text="Hallo">
</svg-text>
<svg-text bgfill="gold" fill="red" width="50" text="Bonjour" rotate="90" fontsize="2em">
</svg-text>