Catch up on stories from the past week (and beyond) at the Slashdot story archive


Forgot your password?
Graphics Open Source

Animated Presentations Using SVG 49

Inspired by work on work on non-traditional presentations in KDE's Karbon (part of Calligra), Aditya Bhatt set out to create a purely client-side tool for creating animated presentations in the browser. Based upon svg-edit and using Sozi, the initial results are pretty cool. His weblog post documents the process — the choice of SVG versus html5's canvas, Javascript instead of SMIL, etc. highlighting the challenges faced even today with different browsers offering wildly different levels of support for each web technology. The sourcecode for Awwation can be had over at Github.
This discussion has been archived. No new comments can be posted.

Animated Presentations Using SVG

Comments Filter:
  • by 6Yankee ( 597075 ) on Friday April 06, 2012 @11:48AM (#39597933)

    ...people would forget everything you said, then spend the next month asking how to make PowerPoint do that.

  • if in doubt blame the browser, but i see a change between frames #1 and #2 and then it gets 'stuck' and no more changes are seen. Firefox 14.0a1 "nightly" ("well y'see thars yer problem right char")
    • Apparently the framework only works well on chrome, FF aurora and opera do crash. But that's pretty much a side effect of being in development. Most devs (or at least the ones that trust in their js skills) write against either chrome or firefox and the integrate on the other browsers.

  • but if you have nothing to say, it doesn't matter how you present it! Just kidding, but how do you share handouts with these tools...
  • by Joehonkie ( 665142 ) on Friday April 06, 2012 @12:05PM (#39598139) Homepage
    Animation is something that should be used minimally in presentations, if even at all. I have seen very few presentations where the animations were to anyone's benefit.
    • by professionalfurryele ( 877225 ) on Friday April 06, 2012 @12:27PM (#39598463)

      Depends on why you are using the animation. Every element of a presentation should have a reason to be there otherwise it is a distraction. Those stupid cube rotation things that Keynote does is annoying and distracting in most presentations because it has me thinking about rotations and not about whatever chemical composition or algorithm or whatever is being discussed. So are the silly wipes people use in PowerPoint.
      This type animation is probably going to be used in a stupid and distracting way in most presentations. However I think it can be considerably more useful than the cube or wipes because this kind of animation can be used to place related concepts in spatial relation to one another. Imagine a presentation on a multi-stage algorithm where one moves up and down a flowchart constantly reminded of the relations between different operations in the algorithm due to their spatial relations on the slide. I suspect if this is used that way, it could be a powerful tool.

      • by mspohr ( 589790 )

        I've used Free Mind for presentations. It allows you to open and close branches and gives the big picture. Check out Mind Mapping tools.

    • Physics lectures, anyone?
    • by swbozo ( 604409 )
      Sorry, you need to think more creatively. I can think of several types of presentations that would benefit from even simple animation support: data flow diagrams (networking, software engineering), illustrating business processes (document workflow, budget approvals), and more that I could probably think of.
  • This (and Prezi) totally make me motion-sick. I hope this fad passes quickly.
    • Ok, yes, a lot of rotates but I guess you could throw in some slides or something so that you don't do a 720 all the time to get from place to place
  • ...depending on your browser, OS and graphics.

    On my 8 year old thinkpad, the animations are pretty jerky on both chrome and firefox, but firefox's font is wrong. On a recent dell, the animations are nice and smooth, but the writing is unreadable on chrome, and some words are missing on firefox.

    I really like the idea of this, and if you ignore the flashy presentations above, you could see how it might be useful to present an overview of something complex, but requiring discussion of certain parts of it in d

  • Animation felt choppy to me, then again its loading the page over and over again. Animated SVG does look cool when done properly.
    • loading the page over and over again? no it's not.

      • I think it is the font that makes it look choppy. He is right in his discussion of the animations, the fonts re-size awkwardly.

        When I first looked at it, without reading anything I thought it would make a good intro movie into your web site to showcase your product, not a presentation.

        It reminds me of the slideshow that every web site uses nowadays, but much better and in my opinion more professional looking.
  • It's really cool and I really, really like SVG, but byt slide 10 it had eaten all of my memory. Probably a memory leak/dodgy implementation in FF.
  • by Anonymous Coward

    All it needs is some lens-flare.

  • SVG Logo (Score:4, Funny)

    by Anonymous Coward on Friday April 06, 2012 @01:26PM (#39599275)

    I got a kick out of how the only thing that wasn't a vector was the SVG logo itself. Hah!

  • impress.js []. It isn't SVG/canvas, but it uses CSS3 and javascript to make prezi-like presentations using simple html. It's actually quite easy to use. I've been having a bit of fun with it lately.
    • by pavon ( 30274 )

      It's actually referenced in the presentation as a possible backend to display the results generated by his editor. The point being that non-technical people don't have to know HTML, just a vector drawing tool.

  • by Anonymous Coward on Friday April 06, 2012 @01:51PM (#39599589)

    Inkscape + jessyink (which is nowadays included by default in inkscape) has been doing this for several years.

  • Strange, there are so few svg animation programs? Ktoon appears unsupported, Synfig has no importer for svg files and an addon for Inkscape still is in the making... Sad.

  • I have an animated SVG presentation of a cave strucure here [].

  • Animated SVG have been around for a while. Check out this clock [].
  • It's neat and reminds me of Scott McCloud's comics.

    FWIW around 1995 or 1997 I made a 3D interactive presentation on an SGI machine with an early VRML viewer, Cosmo IIRC.
    By placing photographs in different orientations in a 3D space, clicking on each would send the user on a spinning arc that ended with the next image in sequence being displayed in proper orientation. Going to the next image would involve backflips, twists, sliding across the stars.

    Anyway, I was just thinking that Sozi is cool and makes beau

<< WAIT >>