Signature fields accept bitmap or vector images as signature representations during the signing process. When the Document Viewer is used to sign documents, the acquired signature image is returned in form of an SVG image that can be combined with a dynamically created SVG signature stamp.
In the following screenshot, the signature image (SVG) is created dynamically using the name of the signer and the unique document ID in combination with the acquired signature representation.
In this sample, the following SVG is generated dynamically based on the signature data returned by the Document Viewer. Customized signature stamps are typically used to beautify the representation or when printing documents to secure the signature against forgery. The following features are used to generate the image:
- Overlapping, rotated names repeated in a grid pattern
- Randomly highlighted names (the random number sequence could be stored to regenerate the original)
As this process is very flexible, more features such as time stamps or other information could be integrated.
The forwarded SignatureData object contains meta data about the signature and the signed document:
The class SignatureStamp provides the static method Create that returns an SVG image based on given parameters:
| Key | Value description |
|---|---|
| size | The destination size of the SVG image. |
| name | The name of the signer that is used to generate the background. |
| fontSize | The size of the font that is used. |
| signatureSVG | The SVG signature representation. |
| documentID | A unique ID that is rendered in the upper left corner. |
| color | The color of the name that is rendered in the background. |
| highlightColor | The highlight color of the name that is rendered in the background. |
| offsetX | The horizontal distance between each rendered name instance in the background. |
| offsetY | The vertical distance between each rendered name instance in the background. |
| highlights | Number of highlighted names that are randomly distributed. |
The following code snippet shows how to call the SignatureStamp.Create method to generate a background signature stamp:
The Create method itself is building an SVG image based by calculating the required name instances, the random highlight locations and the position of the included signature representation. You can download the complete classes in our GitHub repository.
Custom Signature Fields
Signature fields can be completely customized during the signing process. This live demo shows how to generate an SVG server-side based on the created user signature image. Test this live in our online demos.
