New to Kendo UI for jQuery? Download free 30-day trial

Draw a Signature and Export It to SVG


Product Progress Kendo UI Drawing API


How can I allow the user to draw or sign their name on a Canvas, save it as an SVG, and undo the drawing if the user makes a mistake?


Allow the user to draw on the screen (Canvas) and export the drawing as an SVG file by using the Kendo Drawing API library.

<div id="surface-container">
  <div id="surface" style="width: 500px; height: 500px;border: 1px solid black;"></div>

<button class='export-svg k-button'>Export as SVG</button>
<button class='k-button clear'>Clear drawing</button>

  var geom = kendo.geometry;
  var Point = geom.Point;
  var draw = kendo.drawing;
  var Path = draw.Path;
  var path;

  $("#surface-container").on("mousemove", function(e) {
    if (!path) {

    var offset = $(this).offset();
    var newPoint = new Point(e.pageX - offset.left, e.pageY -;

  }).on("mousedown", function(e) {
    path = new Path({
      stroke: {
        color: '#E4141B',
        width: 2,
        lineCap: "round",
        lineJoin: "round"

    var offset = $(this).offset();
    var newPoint = new Point(e.pageX - offset.left, e.pageY -;

    for (var i = 0; i < 1; i++) {
      path.lineTo(newPoint.clone().translate(i * 1, 0));

  }).on("mouseup", function(e) {
    path = undefined;

  var surface = draw.Surface.create($("#surface"));

  $(".export-svg").click(function() {
    // Convert the DOM element to a drawing using kendo.drawing.drawDOM
      .then(function(group) {
      // Render the result as a SVG document
      return kendo.drawing.exportSVG(group);
    .done(function(data) {
      // Save the SVG document
        dataURI: data,
        fileName: "signature.svg",
        proxyURL: ""

  $(".clear").click(function() {

See Also

In this article
Not finding the help you need? Improve this article