Generating SVG

Updated on Sep 24, 2026

You can generate SVG documents for charts, custom drawings, or any other visual content created with the Kendo UI Drawing library. SVG output is text-based and resolution-independent, so use it when the result must scale to any size without quality loss, be styled or edited after export, or be indexed and archived.

To generate an SVG document on the client, use the exportSVG function provided by the Kendo UI Drawing library.

The function takes the root Group of your scene, positioned at [0, 0] in the output. It returns a promise that resolves with an SVG document encoded as a Data URI.

javascript

import { exportSVG, Group } from "@progress/kendo-drawing";
import { saveAs } from "@progress/kendo-file-saver";

const scene = new Group();
// ... populate the scene ...

exportSVG(scene).then((dataUri) => {
    saveAs(dataUri, "scene.svg");
});

For more control over the exported document, like retrieving a raw SVG string instead of a Data URI, you can pass an SVGExportOptions object to the exportSVG function.

Example

View Source

Loading ...

Suggested Links