I need to save my DOM structure as SVG image. To do so I transform some elements according to SVG standards.
SVG demands that line break and img tag shall have closing tags.
When I try to replace them in innerHTML, it automatically converts back to html standards (without closing tag). The same when I just add closing line break tag, I just get two break tags.
Is there a way to convert it to SVG standards?
var someText1 = main.getElementsByTagName("span")[0];
someText1.innerHTML = someText1.innerHTML.replace(/<br>/g, '<br />');
console.log(someText1.innerHTML);
var someText2 = main.getElementsByTagName("span")[1];
someText2.innerHTML = someText2.innerHTML.replace(/<br>/g, '<br></br>');
console.log(someText2.innerHTML);<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
<foreignObject id="main" width="100%" height="100%" x="0" y="0">
<span>one<br>two</span>
<span>three<br>four</span>
</foreignObject>
</svg>