Drawing DOM Elements Overview

The Drawing library enables you to convert a part of or a whole existing page to drawing primitives.

Once the content is converted, you can further process or render it on screen, or export it in the Portable Document Format (PDF), Scalable Vector Graphics (SVG), or Portable Network Graphics (PNG) formats. For more information on how to export and handle content in PDF with the Drawing library, refer to its PDF output documentation.

The Drawing component requires you to include auxiliary styles by either:

  • Loading any of the available Kendo UI themes, or

  • Adding CSS rules to your project.

    .kendo-pdf-hide-pseudo-elements:before, .kendo-pdf-hide-pseudo-elements:after {
     display: none !important;
    .k-pdf-export sub, .k-pdf-export sup {
     display: inline-block;

To convert a DOM element into a Group of drawing elements:

  1. Append the DOM element to the document and make sure that it is visible.

    The drawing of DOM elements which feature the display: none or the visibility: hidden option is not supported.

  2. Apply the drawDOM method. The method takes a DOM element and options as parameters, and returns a promise which resolves to a Group object.

  3. Render the element into an SVG, PDF, or HTML5 <canvas> format by utilizing one of the supported back-ends.

View Source
Change Theme:
{% embed_file react/draw-dom/basic/export-element.js %}

Functionality and Features

In this article

Not finding the help you need?