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?

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?

• javascript
• jquery
• json
• svg
• signature

• The Signature Pad library includes methods to create canvas elements from the JSON, as well as links to libraries that generate images. Are those insufficient? – Oliver Commented Jul 3, 2013 at 18:26
• Unfortunately they are. My client wants to use SVGs because he wants to be able to use the objects in his current code, and the only alternative I've found for generating SVGs using Signature Pad requires php. I'd rather avoid having to rewrite the php in aspx for my project. – robertingrum Commented Jul 3, 2013 at 18:37

1 Answer 1

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/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;
}