Getting started with deck.js:
svg extension
use right arrow to move on
(Firefox may ask for a plugin: just close the message and click on the page to give the focus back)

SVG Introduction

• Scalable Vector Graphics (SVG)
  • Standard format for the web (and more)
  • Vector graphics: arbitrary stretching, no pixels
  • Cool editors (e.g., Inkscape)
  • Lot of existing SVG (smiley by inky2010)

The “svg” extension

• Existing ways of integrating SVG in HTML
  • Inline: the SVG content must be in the HTML file
  • img tag: no interactivity support
  • iframe/object/embed tags: separate DOM tree (styling and manipulation made harder)
• Deck.svg.js extension
  • does “inline” inclusion of external SVG files
  • uses a custom "object" tag and jquery-svg

Deck.svg.js: size

Deck.svg.js: autosize

• Does not work in chrome?
  (should see two smileys below)

Deck.svg.js: stretching

Deck.svg.js: CSS styling

• The same file is included three times using different styles (move your mouse on the yellow circle)
• Needs for the SVG file to not contain the css attribute of interest
  (removed manually for the example)

svg+anim: show/hide

• Use normal “anim” extension
• Smooth operation thanks to jquery-svg
• Make stuff appear/disappear, …

svg+anim: svg attributes

• The "view box" can be animate, and that's awesome

Browser support

• Should be ok with a decent browser
• Chrome problem when only width or height is specified