From 5a774ef6f3b38b19b26913a34b1388530c72334e Mon Sep 17 00:00:00 2001 From: Christian Franke Date: Tue, 9 Apr 2013 14:31:22 +0200 Subject: Initial Commit --- deck.js/samples/deck-svg.html | 368 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 368 insertions(+) create mode 100644 deck.js/samples/deck-svg.html (limited to 'deck.js/samples/deck-svg.html') diff --git a/deck.js/samples/deck-svg.html b/deck.js/samples/deck-svg.html new file mode 100644 index 0000000..ee98779 --- /dev/null +++ b/deck.js/samples/deck-svg.html @@ -0,0 +1,368 @@ + + + + + + + + + + deck.svg.js test/demo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +This page surely has a purpose.
+Use left/right arrow keys to browse the presentation.
+ + +
+ + +
+

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
    • +
+
+ + + + + + + + + + +# + + + +
+ + -- cgit v1.2.1