In order to take advantage of the Html support and render a diagramming structure in SVG, you need to include the following scripts in your html page:
Next, you need to add a DIV container to host the rendered SVG like so:
Finally, you need to load the saved XML diagram in the container:
You can find the code implementation of the Html support along with some useful sample Diagramming structures in github. You can further extend the SVG representation of a diagramming solution by defining dynamic tooltips providing more information about a clicked shape in the SVG. The sample solution attached in github demonstrates one approach for implementing such logic.
Please note that the radDiagram.js file is an open source implementation that you can change to better fit your requirements.
If, for example, you open the FloorPlan sample in the Diagrams FirstLook demo:
Using the Export to Html button you will be able to create an html file displaying an SVG representation of the floor plan:
The described HTML support creates an SVG that is a read-only representation of a diagram created in either the Silverlight or the WPF RadDiagram control. At the moment you can't alter the generated diagram in any way.
SVG doesn't have a text-wrapping property, which means that if your shapes contain wrapped text it will likely be rendered across and outside the bounds in the SVG representation.
Diagram elements with a size (Width or Height) set to Auto will not be rendered correctly in SVG. Here again, this is due to the fact that auto-size is not part of the SVG technology. This means that your auto-sized diagram elements will be rendered but with an incorrect size. The solution to this issue is to make sure that you scale the elements in XAML so that during the serialization an actual size will be saved rather than the 'Auto' value.
Arrow heads scale differently in SVG than in XAML. This may lead to inconsistencies in the arrow heads of very large connections (thick lines) between the original diagramming structure and the SVG representation.
Shapes which get their Background from a global theme in XAML will be rendered gray in SVG. This is due to the fact that the Theme assigns a color dynamically while the serialized Background is empty. Much like the Auto property above, you can remediate this by assigning explicitly a Background so that the serialized XML contains effectively a value.