I use this to implement svg templating

item.json

{
  id: item[0],
  date: item[1],
  message: item[2],
  commiter: item[3],
  branch: item[4],
  x: 0,
  y: 0,
  height: 0,
  width: 0
}

main.js

function convert_template(options) {
  var template=document.getElementById('commit');

  var res = this.update_template(template,m);
  res="<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>"+res+'</svg>';
  var parser = new DOMParser();
  res=parser.parseFromString(res, "application/xml");
  return res.firstChild.firstElementChild;
}
function update_template(t,v){
  for(var prop in v) {
    if(v.hasOwnProperty(prop)) {
      // {{x}} for x, replace
      var re = new RegExp("({{" + prop + "}})");
      t = t.replace(re, v[prop]);
    }
  }
  return t;
}

svg_template.html

<script type='text/template' id='commit'>
      <g class="commit {{id}}" transform="transform{{x}} {{y}}">
        <rect x="0" y="0" height="{{height}}" width="{{width}}"></rect>
        <text x="" y="" class="id">{{id}}</text>
        <text x="" y="" class="date">{{date}}</text>
        <text x="" y="" class="commiter">{{commiter}}</text>
        <text x="" y="" class='branch'>{{branch}}</text>
        <foreignObject width="100%" height="400">
          <div class="content">
            {{content}}
          </div>
        </foreignObject>
      </g>
    </script>