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:

The following code snippet shows how to call the SignatureStamp.Create method to generate a background signature stamp:

var signatureImage = System.Text.Encoding.UTF8.GetString(
               Convert.FromBase64String(data.SignatureImage));

var stamp = TXTextControl.Esign.SignatureStamp.Create(
   new Size(600, 250),
   data.Name,
   12, 
   signatureImage,
   data.UniqueId,
   Color.LightGray,
   Color.Magenta,
   80, 12, 10);

// create a memory stream from SVG
using (MemoryStream ms = new MemoryStream(
   stamp, 0, stamp.Length, writable: false, publiclyVisible: true)) {

   foreach (SignatureField field in tx.SignatureFields) {
      field.Image = new SignatureImage(ms);
   }
}

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.

public class SignatureStamp {
  public static byte[] Create(
     Size size,
     string name,
     float fontSize,
     string signatureSVG,
     string documentID = "",
     Color? color = null,
     Color? highlightColor = null,
     int offsetX = 70,
     int offsetY = 20,
     int highlights = 10) {

     // default colors
     color = color ?? Color.LightGray;
     highlightColor = highlightColor ?? Color.Blue;

     // write svg header
     string sSvgImage = "<?xml version=\"1.0\" encoding=\"utf-8\"?><svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 " + size.Width.ToString() + " " + size.Height.ToString() + "\" xml:space=\"preserve\">";

     int countOffsetX = -offsetX;
     int countOffsetY = 0;
     int countX = 0;
     int countY = 0;

     // generate 
     int[][] positions = CreateRandomPositions(size, offsetX, countOffsetY, offsetY, 10);

     // loop through all rows
     do {

        string textColor;

        // loop through all columns
        do {

           // change highlight color based on random positions
           if (Array.Exists(positions, element => (element[0] == countX) && (element[1] == countY)))
              textColor = HexConverter(highlightColor);
           else
              textColor = HexConverter(color);

           // render the text
           sSvgImage += "<g><text style=\"font-size: " + fontSize.ToString() + "px; font-family: Arial; fill: " + textColor + ";\" transform=\"matrix(1 -0.17 0.17 1 " + countOffsetX.ToString() + " " + countOffsetY.ToString() + ")\">" + name + "</text><text style=\"font-size: " + fontSize.ToString() + "px; font-family: Arial; fill: " + textColor + ";\" transform=\"matrix(1 -0.17 0.17 1 " + (countOffsetX + 30).ToString() + " " + (countOffsetY + 0.4).ToString() + ")\">" + name + "</text></g>";

           // increase offset
           countOffsetX += offsetX;
           countX++;

        } while (countOffsetX < size.Width + offsetX);

        countOffsetY += offsetY;
        countOffsetX = -offsetX;

        countY++; countX = 0;

     } while (countOffsetY < size.Height + offsetY);

     // do all required calculations in Signature object
     var signature = new Signature(signatureSVG, size);

     // center the signature in stamp
     var posX = (size.Width - (signature.Size.Width * signature.ScalingFactor)) / 2;
     var posY = (size.Height - (signature.Size.Height * signature.ScalingFactor)) / 2;

     sSvgImage += "<g transform=\"scale(" + signature.ScalingFactor + ") translate(" + posX + " " + posY + ")\">";

     // render the signature
     sSvgImage += signatureSVG;
     sSvgImage += "</g>";

     // adding document ID
     sSvgImage += "<g transform=\"translate(10 20)\"><text style=\"font-family: Arial; fill: #000;\">Document ID: " + documentID + "</text></g>";

     // close the SVG
     sSvgImage += "</svg>";

     // return the SVG as a byte array
     return Encoding.ASCII.GetBytes(sSvgImage);
  }
}

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.

Launch Demo