Is there a way to convert JSON to an SVG object?

javascript, jquery, json, signature, svg

Solution

Thankfully Signature Pad encodes the JSON data in a super readable way. Because SVG is just a text document, we can easily programmatically generate an SVG image given the encoded JSON signature.

As a proof-of-concept, take this regenerated signature from the Pad docs. We just need to generate SVG paths from each object. Looking at the source for how it's done for canvas (search for `drawSignature`), you can make a simple example in whatever language you choose.

Here's a jsfiddle for it in JavaScript.

function generate_svg(paths) {
  var svg = '';
  svg += '<svg width="198px" height="55px" version="1.1" xmlns="http://www.w3.org/2000/svg">\n';

  for(var i in paths) {
    var path = '';
    path += 'M' + paths[i].mx + ' ' + paths[i].my;   // moveTo
    path += ' L ' + paths[i].lx + ' ' + paths[i].ly; // lineTo
    path += ' Z';                                    // closePath
    svg += '<path d="' + path + '"stroke="blue" stroke-width="2"/>\n';
  }

  svg += '</svg>\n';
  return svg;
}

Problem

I'm working on a signature capture applet and one of the requirements is that it stores the signature as an SVG for future use. I am currently using Signature Pad to capture the signature, but it stores it as JSON. Is there anyway to generate an SVG object using JSON, or am I going about this the wrong way?

Original source