Creating interactive SVG maps for a web portal

Question

I'm creating a web portal with maps in SVG format and set in the HTML code using <object> tag in order to preserve the possibility of interactivity. My main problem is how to create and support an interactive SVG format in the browser?

As far as I have researched there are several options:

1. SMIL animation directly in SVG,
2. CSS animation,
3. JavaScript libraries.

It seems to me that this last option has the most potential. There are many libraries (Snap.svg, svg.js, Velocity.js, d3.js, jVectorMap.js, GreenSock ....) to use, so I would appreciate if someone could give some tips on which of them to use.

Do I need to use them within the SVG directly using the <script> tag or using an external .js file? To my knowledge, jQuery can't be used directly within SVG.

Answer 1

In fact, all three variants work more or less with different advantages and drawbacks.

1. SMIL

SMIL is easy to use inside of your SVG and allows modifying attributes of your SVG object directly. However, if you want/need to support Internet Explorer or Edge, you don't have much luck (see CanIUse).

Chrome 45 deprecated SMIL in favor of CSS animations and Web animations. But the Chrome developers recently suspended their intent (see this StackOverflow answer).

2. CSS Animations

These are a good alternative for animation of SVGs. The implementation is normally very fast and smooth, as far as I saw it. Browser support is better especially with Microsoft Browsers. So I would really recommend it.

If you need some more user interaction, you get to the limits of CSS animations quickly. Some interaction is possible, but if you want more, you need JavaScript.

3. JavaScript libraries

jQuery really have serious problems with SVGs, but I think it is better doing without jQuery (for both, jQuery and your software) because if it would support SVGs, it would be even larger and slower. However, if you already have jQuery included, it is possible to select elements and then animate them without jQuery.

Other libraries are more specialized for SVG and work really great (I myself worked with d3.js with good results).

Recommendation

If you don't need to support Microsoft browsers, then SMIL can be an easy and compact way to define certain animations.

If you need those browsers, I would recommend trying CSS animations. But if that seems too static, one of the JavaScript libraries may help.