How to edit text in a SVG file? (not programmatically) - html

Question

I'm trying to edit a .svg file i found in a website template i recently downloaded.
The file code is this one:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="10px" viewBox="0 0 52 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Stacked</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-size="12" font-family="ProximaNova-Bold, Proxima Nova" font-weight="bold">
<text id="Stacked" fill="#000000">
<tspan x="0" y="9">Stacked</tspan>
</text>
</g>
</svg>
What i want is to simply change the text. I was expecting to do it by changing the inner text of the TSPAN tag you can see at the end of the file. But nothing happens, even if I change text from a SVG editor.
So, my question is: what is the proper way to achieve my goal? Is it even possible to change text in a SVG file?

Answer 1

This is your code, and it should work (please run the code):
svg{border:1px solid;overflow:visible}
<svg width="52px" height="10px" viewBox="0 0 52 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Stacked</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-size="12" font-family="ProximaNova-Bold, Proxima Nova" font-weight="bold">
<text id="Stacked" fill="#000000">
<tspan x="0" y="9">Stacked edited</tspan>
</text>
</g>
</svg>
As an observation: the SVG canvas is very small so large part of the text is not visible unless you add overflow:visiblefor the svg.