JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Original xml :</h3>
<div id="content0"></div>
<h3>When text tag are inlined, add line jump :</h3>
<div id="content1"></div>
<h3>Tag tspan id="trsvg*" removed :</h3>
<div id="content2"></div>
<h3>Tag text and others, id="trsvg*" removed :</h3>
<div id="content3"></div>

CSS

div { border: 1px solid #CCC ; padding:1em; margin: .5em;}

JavaScript

var content0= `<switch transform="translate(460,300)">
<text systemLanguage="en" id="trsvg25"><tspan id="trsvg1">Earth</tspan></text>
<text systemLanguage="de" id="trsvg26"><tspan id="trsvg2">Erde</tspan></text>
<text systemLanguage="sl" id="trsvg27"><tspan id="trsvg3">Zemlja</tspan></text>
<text id="trsvg28-th" systemLanguage="th"><tspan id="trsvg4-th">โลก</tspan></text><text id="trsvg28"><tspan id="trsvg4">Earth</tspan></text></switch>`;

document.querySelector("#content0").innerHTML= `<xmp>${content0}</xmp>`;
var content1= content0.replace(/text><text/g,'text>\n<text');
document.querySelector("#content1").innerHTML=  `<xmp>${content1}</xmp>`;
var content2= content1.replace(/<tspan id=\"trsvg\d+(-[a-z]{2})*\">(.+)<\/tspan>/g,'$2');
document.querySelector("#content2").innerHTML=  `<xmp>${content2}</xmp>`;
var content3= content2.replace(/ id=\"trsvg\d+(-[a-z]{2})*\"/g,'');
document.querySelector("#content3").innerHTML=  `<xmp>${content3}</xmp>`;