New to Telerik UI for ASP.NET AJAXStart a 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.

ASP.NET
<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
See Also
Not finding the help you need?
Contact Support