8 ms·

This is awesome. One of the problems I've had with Raphael is that it's explicitly not supposed to be an SVG library, so SVG-specific features tend to go unsupp

by thurn 13y ago

This is awesome. One of the problems I've had with Raphael is that it's explicitly not supposed to be an SVG library, so SVG-specific features tend to go unsupported. SVG groups are probably the most obvious example of this.

adyus 13y ago
Without knowing this fact about Raphael, I was about to reply to another comment prematurely. I was going to complain that having the same author as Raphael doesn't explain why Snap.js exists, instead of a better version of Raphael. Thank you.
- alxndr 13y ago
  There's a helpful "Why Snap?" page that points this out, as well as that it supports animation.
  - adyus 13y ago
    Alas, I was suffering from TLDR syndrome. I will definitely give Snap a try, along with seeing if it plays well with Raphael for graceful degradation for older browsers.
  - twistedpair 13y ago
    SMIL is the SVG animation markup. Sadly very few people have every used it. SvgWow.com has a bunch of great examples like: http://svg-wow.org/camera/camera.xhtml http://svg-wow.org/camera/camera.xhtml
    - Groxx 13y ago
      There's an awful lot of Javascript backing that animation, I can't see where it's being turned into SMIL. At the very least it's definitely not static on the page, since the definition of the animation is entirely in JS: http://svg-wow.org/camera/camera.js http://svg-wow.org/camera/camera.js Does it write SMIL somewhere near the end and then let it run, or does it just run in JS? Skimming through I couldn't tell, but I don't really have time to read more closely.
      - twistedpair 13y ago
        Some JS is still used, certainly. However you can define the animation steps, timings, recursion, panning, zooming and many other facets purely in SVG/SMIL. When I wrote a financial world map visualization and drill down tool, 95% of the animation logic was in SVG/SMIL. The JS just called start/stop on the various animation elements.
- twistedpair 13y ago
  That's the point, RaphaelJs is to allow SVG use on IE by converting it to VML.
  - adyus 13y ago
    Aye aye, coupled with Modernizr, it should solve (most) use cases.

by thurn 13y ago

adyus 13y ago

Without knowing this fact about Raphael, I was about to reply to another comment prematurely. I was going to complain that having the same author as Raphael doesn't explain why Snap.js exists, instead of a better version of Raphael. Thank you.

alxndr 13y ago
There's a helpful "Why Snap?" page that points this out, as well as that it supports animation.
- adyus 13y ago
  Alas, I was suffering from TLDR syndrome. I will definitely give Snap a try, along with seeing if it plays well with Raphael for graceful degradation for older browsers.
- twistedpair 13y ago
  SMIL is the SVG animation markup. Sadly very few people have every used it. SvgWow.com has a bunch of great examples like: http://svg-wow.org/camera/camera.xhtml http://svg-wow.org/camera/camera.xhtml
  - Groxx 13y ago
    There's an awful lot of Javascript backing that animation, I can't see where it's being turned into SMIL. At the very least it's definitely not static on the page, since the definition of the animation is entirely in JS: http://svg-wow.org/camera/camera.js http://svg-wow.org/camera/camera.js Does it write SMIL somewhere near the end and then let it run, or does it just run in JS? Skimming through I couldn't tell, but I don't really have time to read more closely.
    - twistedpair 13y ago
      Some JS is still used, certainly. However you can define the animation steps, timings, recursion, panning, zooming and many other facets purely in SVG/SMIL. When I wrote a financial world map visualization and drill down tool, 95% of the animation logic was in SVG/SMIL. The JS just called start/stop on the various animation elements.
twistedpair 13y ago
That's the point, RaphaelJs is to allow SVG use on IE by converting it to VML.
- adyus 13y ago
  Aye aye, coupled with Modernizr, it should solve (most) use cases.