Who has experience with Javascript libraries for SVG (like snap.svg, raphael, velocity, svg.js ...) and can shed some light on their pros and cons for specific usage with Inkscape drawings?

I would like to start a drawing in Inkscape, then add (in an external editor) javascript to it for interactive animation.I need to put (simple) logic behind it, not only "onclick" events.

A simple example would be a symbolic drawing of two switches and a light bulb. The light turns on only if switch A and switch B are on. So you switch on A (and see the switch close), but the light stays off. You switch on B and the light goes on. You turn off A and the light goes out again. Etc.
Also create and destroy SVG elements.

I don't want to use HTML canvas because ultimately I want to learn also to make complex animations of complex SVG drawings I make in Inkscape.

I don't like Adobe so I'm a bit reluctant about snap.svg... Google doesn't seem to give me the answers I need... Raphael seems cool, but can it do what I want?

Any ideas/comments are very welcome! Many thanks in advance...

I've not used any JS libraries for SVG, but I have used plain old JS with the (overly verbose) W3C DOM calls to do the kind of thing you're talking about. I try to avoid JS libraries where I can, so that my code isn't dependent on some third party library that may not be kept up to date, and I don't have to learn yet another syntax.

I'll admit that the SVG path syntax doesn't exactly lend itself to easy manipulation with plain old JS, but it doesn't sound like you need that level of control. For showing/hiding, setting attributes, appending and removing objects, the DOM calls are usually sufficient.

My advice would be to give the objects you want to manipulate sensible IDs within Inkscape via the Object Properties dialog, and get familiar with element.querySelector() and element.querySelectorAll() for getting a handle on them within your code (or document.getElementById() which is less flexible but faster).

I just learned about a JS library called D3.js, which shows some AWESOME examples on it's GitHub page! (although I'm not sure if any of those examples are with SVG or Inkscape images??) I think their site is d3js.org.

Sorry, but I could not begin to compare among JS libraries. I only just recently learned what they are, in general.

I also tend to go for the "plain" solutions, without relying on extra's. But seeing the difference between selecting a simple line and changing it's attributes in plain JS and doing the same using snap.svg , I think I'm going for snap. Not to mention easing in and out, etc. In any case, you can download snap and never care anymore if it's maintained or not. It's just a set of intelligently designed functions you could have written yourself, nothing more, it doesn't rely on anything else than JS itself. And, as I understand it, will remain backwards compatible for a very long time (in the same way JS does).

I also saw d3.js, it looks awesome. But it's more designed towards representing data in graphical ways than for animation in se (although it could be used of course for animation in very interesting ways). I think for animation it's overload, if you don't plan on using complex data matrices as a base.

So I'm going for snap. I'm already at a "hello world" kind of level Succeeded in making a line move when I clicked on it, then move back when I clicked again on it. Now isn't that magic But I'm really starting to see how where it can go and how it works, it's very interesting. And you can let logic functions, maths and variables loose on it, nice...