Search code examples
jquerysvgelectronic-signature

drawing from saved svg in jquery signature


I'm using the JQuery UI Signature library to take signatures on websites. I can capture the signatures OK, but if I try and re-draw the signature (using saved as SVG), it doesn't work. Console says

"Uncaught SyntaxError: Unexpected token < in JSON at position 0"

JSFiddle

var sig='<svg xmlns="https://www.w3.org/2000/svg"><g fill="#ddd"><rect x="0" y="0" width="300" height="100"/><g fill="none" stroke="#000000" stroke-width="2"><polyline points="43.84,15.22 46.84,17.22 49.84,22.22 52.84,28.22 55.84,33.22 59.84,40.22 62.84,54.22 62.84,58.22 62.84,61.22 59.84,65.22 58.84,65.22 58.84,63.22 59.84,57.22 64.84,49.22 79.84,44.22 86.84,44.22 88.84,44.22 89.84,51.22 86.84,56.22 83.84,59.22 71.84,61.22 65.84,61.22 63.84,59.22 61.84,56.22 61.84,54.22 64.84,50.22 102.84,44.22 155.84,41.22 192.84,41.22 233.84,40.22 234.84,40.22"/></g></g></svg>';

$("#theSignature").signature();
$("#theSignature").signature("draw",sig);       

Solution

  • Click on the Save/Restore tab in the link in your question and it says this:

    Extract the signature as a JSON value, and later re-draw it from that value. Alternately you can generate the signature as SVG, or as a data URL in PNG or JPEG format.

    So you can save/restore as JSON but you can only save as SVG, you can't per the libraries own documentation reload an SVG signature.