CODEWITHSUNDEEP
javascriptjqueryjsonsvgsignature
robertingrum
robertingrum

Reputation: 157

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

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?

Upvotes: 7

Views: 26978

Answers (1)

Oliver
Oliver

Reputation: 509

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

Upvotes: 12

Related Questions