We retrieve an svg from an Assets folder and display it in a Frame with an html script that handles clicks and opens ghost pages describing what was clicked. github 
Extra credit. We might read the sitemap with each click to determine if we should just open an exiting page rather than making a new one. The user might have saved notes on the page which we don't want to clobber.
http://ward.dojo.fed.wiki/assets/pages/clickable-svg/demo.html HEIGHT 350
pages/clickable-svg
This is the diagram as it appeared in QST Magazine of May 1977 from a sketch by Steve Belter.
State-transition diagram for the
Morse teaching program. qst
SVG we constructed using a dot format editor. site
digraph { layout = neato overlap = false splines = true start [label="Start" shape=plain] select [label="Select\nLetter"] send [label="Send\nLetter"] wait [label="Wait\nResponse"] correct [label="Correct\nLetter"] bar [label="Bar\nGraph"] start -> select -> send -> wait wait -> bar [label="Return"] bar -> select wait -> wait [label="Incorrect"] wait -> correct [label="Correct"] # wait -> correct [label="Time\nUp"] correct -> select [label="Correct"] correct -> send [label="Time\nUp"] }
We removed the Time Up edge because for some reason dot failed to make a second edge but rather just concatenated the labels. What's with that?
.
Eric suggests, Another place to find those is in the DOM in the <graphviz-viewer> element. It's a little tricky, but this might work from an HTML script inside a frame. chat
http://ward.dojo.fed.wiki/assets/pages/clickable-svg/test.html