How can I automate slides in SVG embedded into an html page?

Asked by Mikhail Titov on 2013-06-21

I wonder if there is a tutorial out there on how can I advance slides from an html page if possible. I don't want a self-containing presentation, however single figure looks overloaded. Of course I can split SVG file into a few and embed those into an html page individually gradually adding more details. However I thought it would be neat if I can keep a single SVG that can be viewed alone or automated somehow from a page.

Question information

English Edit question
JessyInk Edit question
No assignee Edit question
Solved by:
Mikhail Titov
Last query:
Last reply:
Mikhail Titov (mtitov) said : #1

I accidentally used img tag as I was in Emacs Org Mode, as later I realized I'd be better off with embed tag for SVG.
Source code of this [1] web page summarized pretty much everything. One has to get a window of embedded SVG document and call JessyInk functions that can be seen in SVG file.

Something along the following lines do the job.

<embed id="jessy" src="drawing.svg" type="image/svg+xml" width="600px" style="border: 1px solid black" />
<a href="javascript:f()">Click me</a>
  function f() {
  var svg = document.getElementById('jessy');
  var doc, win;
  try {
    doc = svg.getSVGDocument();
  catch(exception) {
    alert('The GetSVGDocument interface is not supported');
  if (doc && doc.defaultView)
    win = doc.defaultView;
  else if (jessy.window)
    win = jessy.window;
  else try {
    win = jessy.getWindow();
  catch(exception) {
    alert('The DocumentView interface is not supported\r\n' +
          'Non-W3C methods of obtaining "window" also failed');


Nicely done! Thanks for sharing.