I came across an example SVG signature capture by @heycam here:

Capture Signature using HTML5 and iPad Example: .html

Much simpler than any previous example I have seen, and it works with mouse and touch!

But how would I submit the result as part of a form?

I think I'd want it submitted as a base64 string but I'm open to other options...

For bonus points... any way to strip the yellow background and line from the submitted data?

Thanks!

I came across an example SVG signature capture by @heycam here:

Capture Signature using HTML5 and iPad Example: http://mcc.id.au/2010/signature.html

Much simpler than any previous example I have seen, and it works with mouse and touch!

But how would I submit the result as part of a form?

I think I'd want it submitted as a base64 string but I'm open to other options...

For bonus points... any way to strip the yellow background and line from the submitted data?

Thanks!

• javascript
• html
• svg

• I'm fan of base64, I don't see better solution... – Mohsen Commented Sep 22, 2011 at 22:35
• Neither the yellow background nor the dotted line are included in the output path, they are elements of the included signature.svg. The signature path is stored in svg element <path id='p'>'s d attribute. When the page is loaded, open up Firebug and fold open the SVG element. The draw a signature and you'll see the d attribute being filled. – fvu Commented Sep 22, 2011 at 23:02

2 Answers 2

That SVG-based sig capture hack by @heycam is technically awesome, if limited browser support for SVG does not scare you, by all means, call into the iframe, extract the source and push it server-side as text:

var strokes = window.frames[0].getSignature()

To get a string line:

"M182,46 M141,30 L136,34 L136,36 L134,40 L134,47 L135,52 L146,64"

Push it into SVG template like so:

var svgstring = '<svg xmlns="http://www.w3/2000/svg" width="300" height="100">' +
    '<path stroke="navy" stroke-width="2" fill="none" d='+ strokes +'/></svg>'

And push that to server in hidden input field.

However, there is an easier way:

http://willowsystems.github./jSignature/

It works in almost all browsers (mobile and desktop) and can export nice, de-noised, smooth curves SVG.

If you look at his code, you can see how he extracts the signature into the div tag.

There's a script in the inline SVG that records the content into the "signaturePath" variable as events are fired. He then calls "getSignature" within the iframe to return the path. In order to extract the path, when the form is submitted, you'd need to call that function and create a hidden input tag which has a value of the path returned. You would extract the submitted value (which is the path) on the server side. You can later recreate the SVG using the saved path (which wouldn't have the yellow background).