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 supportiframe/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: autosize
If width or height is omitted, unspecified in chrome
Deck.svg.js: CSS styling
The same file
included three times
using different styles
(move your mouse on the yellow circle)
Deck.svg.js: helpers
The same image+style (but different options) (mouse on blue circles)
The extension processes your SVG on loading
changes "style" to attributes in SVG (unless class no-stylerewrite is set (e.g., right one))
rewrites some duplicate IDs when including multiple SVGs (fixes missing arrows, ...)(unless class no-idrewrite is set)
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
Problem when only width or height is specified
Digging Deeper
If you want to learn more, you can:
