New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Export to SVG

You can export RadDiagram as an SVG document on the client. This is done in two simple steps (Example 1):

  1. Get a reference to the client-side object of the underlying Kendo UI diagram as described in the Overview help article.

  2. Call the exportSVG method of the client-side object of the diagram.

The export to SVG functionality is currently supported in Firefox, Chrome, IE10+ and Opera 15.0+ (Blink).

Example 1: Export a diagram as an SVG document.

<telerik:RadDiagram ID="RadDiagram1" runat="server">
    <LayoutSettings Type="Tree" Subtype="Down" Enabled="true">
    </LayoutSettings>
    <ClientEvents OnLoad="onLoad" />
    <ShapesCollection>
        <telerik:DiagramShape Id="DiagramShape1"></telerik:DiagramShape>
        <telerik:DiagramShape Id="DiagramShape2"></telerik:DiagramShape>
    </ShapesCollection>
    <ConnectionsCollection>
        <telerik:DiagramConnection>
            <FromSettings Connector="Top" ShapeId="DiagramShape1" />
            <ToSettings Connector="Bottom" ShapeId="DiagramShape2" />
            <StrokeSettings />
        </telerik:DiagramConnection>
    </ConnectionsCollection>
</telerik:RadDiagram>
<script type="text/javascript">
    function onLoad(diagram) {
        var diagramWidget = diagram.get_kendoWidget();
        diagramWidget.exportSVG().done(function (data) {
            kendo.saveAs({
                dataURI: data,
                fileName: "diagram.svg"
            });
        });
    }
</script>

You can find a list of the available parameters of the exportSVG method in the Kendo UI Diagram API Reference.

See Also

In this article