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