title: Live edit text in an SVG that's embedded in a website
body: <p>I'm doing some find and replace in embedded SVGs. Part of a web to print service I'm creating.
  I have text tags inside the SVG like {name}, {title}, {phone}, etc.</p>
  
  <p>I wrote a script to replace these values and it live updates the embedded SVG. It currently works alright. </p>
  
  <p>It's using the jQuery SVG plugin to load the SVG.</p>
  
  <pre><code>// Callback after loading external document
  function loadDone(svg, error) {
    svg.configure({viewBox: '0 0 315 180', width: 579, height: 331}, true); //resize the svg. viewBox must be the same size as the initial width defined in the SVG
    var textElems = document.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'tspan');
    var doc = document.getElementById('svgload').contentDocument;
  
    for (var i = 0; i &lt; textElems.length; i++) {
      var id = textElems[i].childNodes[0].nodeValue;
      id = id.replace("{",""); //remove brackets {}
      id = id.replace("}","");
      alert(id);
      $("#formContainer").append('&lt;p&gt;' + capitalize(id) + ': &lt;input type="text" id="' + id + '" class="replace" /&gt;\n');
      $("#formContainer").append('&lt;input type="hidden" id="' + id + 'PrevVal" value="{' + id + '}" /&gt;&lt;/p&gt;');
    }
      $('.replace').keyup(function() {
        var prevValID = $(this).attr("id") + "PrevVal"; //determine the hidden input id
        var oldVal = $("#"+prevValID).val(); //set oldVal to the hidden input value, first time it's {id}   
        var currentVal = $(this).val(); //set the currentVal to the user inputted value         
        changeText(oldVal,currentVal); //swap the oldVal with the currentVal
        $('#'+prevValID).attr("value",currentVal); //set the hidden input value to the last inputted user value
  
        svg.configure({viewBox: '0 0 315 180', width: 579, height: 331}, true); //"resize" to svg to clear the text. some browsers break the new text until the svg is "zoomed", or in this case, resized         
    });
  
    function changeText(oldVal,newVal) { //swap the values inside the SVG file
      for (var i = 0; i &lt; textElems.length; i++) {
        if (textElems[i].childNodes[0].nodeValue == oldVal) {
          textElems[i].childNodes[0].nodeValue = newVal;
        }
      }
    } 
  }
  function capitalize(str) {  //capitalize first letter of words
    var firstLetter = str.slice(0,1);
    return firstLetter.toUpperCase() + str.substring(1);
  }
  </code></pre>
  
  <p>There are some bugs though. For example, since I'm creating hidden divs to store the previous value of the SVG text one can create a situation where typing the same thing into two text boxes creates two identical IDs and then further typing updates both text elements in the embedded SVG. It also doesn't like tags that have spaces in them, like {full name} versus {name}.</p>
  
  <p>Any suggestions on how to clean this whole thing up? I know I should be able to detect tags (searching for {}) and then get the text or tspan id associated with them and update the node value that way, however, I've got severe coding block and can't quite start on it!</p>