A declarative approach for HTML Timing using SMIL Timesheets

timesheets.js can also be used with SVG documents, like this mini-slideshow below — click on the demo block to cycle through the SVG slides.

Your browser doesn’t support SVG. :-(
You can download the SVG file here: diagram.svg

View this demo in full page.

SVG Markup

We could have used inline SVG in this HTML5 document, but we have chosen to embed a full SVG document in an <object> element instead — mostly to support older browsers. Here’s the markup of the SVG document:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 800 540" preserveAspectRatio="xMidYMid meet"
     xmlns       = "http://www.w3.org/2000/svg"
     xmlns:xlink = "http://www.w3.org/1999/xlink"
     xmlns:smil  = "http://www.w3.org/ns/SMIL">

  <title> SVG Timing </title>
  <script type="text/javascript" xlink:href="timesheets.js"></script>

  <style type="text/css">


  <g id="slideshow"
     smil:timeContainer = "seq"
     smil:timeAction    = "intrinsic"
     smil:repeatCount   = "indefinite"
     smil:next          = "click">

    <g> […] </g>
    <g> […] </g>
    <g> […] </g>
    <g> […] </g>
    <g> […] </g>


Notice the xlink and smil namespace declarations in the <svg> root element.

The slideshow structure is similar to typical HTML slideshows: one <seq> container node, each slide is a <g>roup element.