ySVG Demo Programs

The ySVG distributions contain a variety of tutorial Java programs accompanied by their source code. These programs demonstrate how to use essential features of the ySVG library, including

Demos related to using yext.svg.io.SVGNodeRealizer

demo.yext.svg.GraphMLDemo Demonstrates how to register yext.svg.io.SVGNodeRealizerSerializer to enable serialization of graphs that use yext.svg.io.SVGNodeRealizer.
demo.yext.svg.RenderingPerformanceDemo Demonstrates performance improvements due to image caching when rendering SVG enhanced nodes in yFiles' viewer component.
demo.yext.svg.SVGNodeRealizerDemo Demonstrates the usage of SVGNodeRealizer as default node realizer for a predefined set of choosable SVG icons.
demo.yext.svg.SimpleSVGNodeRealizerDemo Demonstrates the usage of a SVGNodeRealizer which displays a node as a Scalable Vector Graphics (SVG). The SVG to be displayed as a node can be specified on the command-line. Following is the SVG definition of the SVG node that you can see in the sample outputs below: 

        <?xml version="1.0"?>
        <svg xmlns="http://www.w3.org/2000/svg">
            <g transform="scale(0.6,1.0)">
                <path style="fill:none; stroke:#D98000; stroke-width:10"
                      d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
                <path style="fill:#D90000"
                      d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
                <g style="fill:#FFFFFF; stroke:black; font-size:45; font-family:Verdana">
                    <text x="52" y="76">SVG</text>
                </g>
            </g>
        </svg>

Demos related to exporting graphs to SVG

demo.yext.svg.SVGExportDemo Demonstrates how to export a graph to SVG or SVGZ format.
demo.yext.svg.HyperlinkDemo Demonstrates how to write SVG that hyperlinks nodes, edges, and labels of a graph. Below is a sample SVG output of this demo. You can click on the nodes to get transferred to the yWorks website.
Your browser does not support SVG content!
demo.yext.svg.RolloverDemo Demonstrates how to write SVG that shows rollover effects when the mouse is over nodes or edges of the graph. Below is a sample output of this demo. Move the mouse over the nodes and edges to see them change their appearance.
Your browser does not support SVG content!
demo.yext.svg.HighlightConnectionsDemo Demonstrates how to write SVG that highlights all incoming and outgoing edges at a node. Below is a sample output of this demo. Move the mouse over a node to see how its adjacent edges get highlighted.
Your browser does not support SVG content!
demo.yext.svg.HtmlTooltipDemo Demonstrates how to write SVG that displays HTML formatted tooltips for each node in the graph.

Running the Demos

From Within an IDE

Set <ySvgDir>/src as your source directory. Then add <yFilesDir>/lib/y.jar, <ySvgDir>/lib/ysvg.jar, <ySvgDir>/lib/batik.jar, and the source folder <ySvgDir>/src to your classpath. Now you should be ready to compile and run all executable demo classes.

With Ant

First make sure you have the build tool Ant installed on your system. Now you can use the demo build script build.xml located in this directory to launch each demo by specifying its simple class name as a target.