Develop Reference

Creating interactive SVG maps for a web portal

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:
SMIL animation directly in SVG,
CSS animation,
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.

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.

Printable rotation in IE8

How do I print rotated content (divs) in IE8? The DXImageTranform filter options do not appear to be printable.
http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85)
Just to put this into context. I'm writing a pure dom-based canvas library called simpleCanvas. I am desperately trying to offer rotation of text, rectangles and images in IE8 without using a VML fallback, because it's ugly and slow, and error prone. A VML fallback is on my todo list as I concede that it's the only way I know how to do this in IE8 without additional tools. I'm hoping that there is some trick that I'm missing that doesn't come with a third party or server side requirement. If you have found it, a bounty is coming your way.

This is a massive stretch but is the best idea I could come up with:
Explorer Canvas - https://code.google.com/p/explorercanvas/ - Implements the canvas in IE8 by abusing VML.
HTML2Canvas - http://html2canvas.hertzen.com/ - Can render your document onto a canvas, which can then be rotated.
Failing that, I suspect your only option is going to be to generate a rotated document server-side and give that to the client for printing.
Edit: One other last ditch would be to handle the printing via Silverlight, embedding the page in a browsercontrol inside silverlight (yuck), rotating that and printing the result via SL.
Really grasping at straws here though for anything client side in a legacy browser.

According to Printing webpage with rotated text in Internet Explorer 9 you need to use -ms-transform too. Be sure to read the EDIT too as there is something buggy.

Would https://developers.google.com/chrome/chrome-frame/ be acceptable? I'm guessing not if its a LOB application, but it'd give you the features you need without taking the user out of IE8 in the strictest sense. Just another avenue to explore.

https://code.google.com/p/jqueryrotate/ - This will rotate images, it uses VML to do it in IE8. The caveat is that any text you wanted to rotate would have to be as an image.

I've never used it and it would be some work but have you tried svgweb? Basically it uses SVG if the browser supports it and Flash if it doesn't. Because it's a flash object you can print it like an image once rendered.
Here's a few more demos of it: svgweb Demos

Can we use canvas.toDataURL on IE7 and IE8?

I am using toDataURL() method of a canvas object. It works on IE9 and Chrome.
But it is not supporting for IE7 and IE8. I found this link
https://github.com/sampula/SVG.toDataURL/commit/9b59af148b7f14d41974cf318eed6f84c8c91062
It extends SVG to use toDataURL(). But in its implementation, it again uses canvas.toDataURL(). I am using Google's API (jquery.flot.js) for plotting all the graphs graphs. But it also uses canvas to plot the graph. So, SVG is not an option.
I there ever a way to use canvas.toDataURL() or something similar for IE7 and IE8.
Thanks in advance

IE7/8 does not support either Canvas or SVG.
It does however support VML, which is a vector language similar to SVG, and there are a number of javascript-based hacks for IE that use its VML functionality to emulate both Canvas and SVG in this older browser.
The most well known IE-Canvas hack is this one: http://code.google.com/p/explorercanvas/
I haven't spent much time with it myself, so I can't vouch for whether it can do specific functionality such as the toDataURL() method you're asking about, but if you can't do it with this, then it's unlikely to be possible at all.
I mentioned that there are similar tools for VML->SVG as well. If that's of interest to you, then you might want to look into this one: http://code.google.com/p/svg2vml/
Bear in mind that no matter how clever these hacks are, there is always a fundamental issue of performance. IE7/8's javascript interpreter is very slow by modern standards, and these are javascript-based tools trying to shoehorn very modern functionality into this old browser. They may well work, but don't try to do anything too clever with your canvas or SVG, or you'll kill the browser.
Finally, since you mentioned that you're using all this to draw graphs, I will point out the graphing module of the Raphael library. Raphael is a library which draws SVG graphics on all browsers (falling back to VML for IE). The graphing module provides all the usual graph types, wrapped in an extremely easy-to-use javascript API. And it is fully cross-browser compatible -- it works on all desktop browsers out of the box from the latest Chrome and Firefox all the way back to IE6. If you're struggling with cross-browser compatibility with the tools you're using now, you may want to switch to this library.
Hope that helps.

I have recently created an application in which I had to use toDataURL() but I was not able to find any way to do this in IE7/8. My application was an online image editor in which user was able to save the canvas contents. I believe there is not way we can use this method in IE7/8.

<marquee> html tag usage/replacment

I know that <marquee> tags are evil.
If it is so bad to have scrolling text, then using JS to get the same effect doesn't make it any better, right?
And suppose I decided to have some scrolling text (gasp), is there some type of CSS(3?) or HTML(5?) way to do this that is technically correct (i.e. not deprecated)?
If there isn't a CSS/HTML solution, should I use:
Javascript, which will be heavier to download and might be turned off (is that a pro or a con?), but I get the bonus of being W3C correct and valid and non-deprecated and smart,
or should I use
the hated <marquee> (<blink><blink>) tag, which is lightweight (19 bytes!), fully supported by all browsers in all rendering modes and all doctypes (even though it shouldn't be), but is deprecated?
Thanks.
P.S. I think a news ticker is a valid use for marquee-style
P.P.S. If anybody tells me that if I don't want a heavy Javascript solution I should use JQuery because it is lightweight, I will shoot them in the comments
Edit: I'm adding JQuery tag since that seems to be the best way to get attention from a lot of experts on JS questions, and it is not totally unrelated here.

It is not the effect that is bad. The problem with marquee, blink and font tags is that they convey presentation not structure of your content.

CSS3 has support for marquee, but it is only supported in a few browsers (Safari and Chrome are the only one, to my knowledge)
http://www.w3.org/TR/css3-marquee/
There are several JQuery plugins that accomplish it, but they come at the expense of loading JQuery (26Kb, heavier than the HTML only solution, but not what I would call heavy)
http://plugins.jquery.com/plugin-tags/marquee
Of course you can easily do it yourself without JQuery, but looking at those plugins may give you ideas.
Another option to consider is to do a small Flash animation.

If you're sure that it works on all platforms you're aiming for, and you don't care what w3c says you can certainly use the marquee tag. There is no way that you can find a JavaScript solution that works in less than 14 bytes.
The only unfortunate thing is that the reason all these browsers support all these deprecated elements that are -in this case- not even part of any HTML standard, is because of all these people using these elements and start whining when a new version doesn't support their 1982 compliant website anymore.
So please go ahead and use marquee as long as it works for you, but please don't complain if you site stops working in a newer browser.

Here's the code that implements the marquee element in Firefox, it's basically doing it in JavaScript anyway so you could always just adapt that code and use it directly in all browsers.
The code can be hacked around so that marquee can be implemented on any element in Firefox, applied through CSS and XBL bindings (Firefox only example). The equivalent in IE would be behaviours, and you could use the CSS3 in Safari/Chrome as nico suggested and you would be keeping the presentational stuff out of your markup, but only you can know if it's worth the effort.

I've been looking for the most efficient and cross-browser supported marquee implementation. For whatever reason, even the webkit CSS marquee implementation is glitchy.
The common approach is to use timer (or jQuery animate implementation) to adjust the CSS margin property of the element. This is too glitchy and very inefficient. I came up with implementation that utilises CSS3 transitions for browsers that support it and otherwise animate the scrollLeft property of the containing element. It is an experimental implementation, though it works well with IE7+. Other people might find it useful as well, https://github.com/gajus/marquee (demo https://dev.anuary.com/60244f3a-b8b2-5678-bce5-f7e8742f0c69/).

Recently, i had to do this effect for a client and i've used this plugin which is very easy to use :
jQuery Marquee plugin on github
jQuery Marquee on plugins.jquery.com

Which is better and why? RaphaelJS or HTML5 Canvas?

I found a vector library on the Internet that even works with IE6!
http://raphaeljs.com/index.html
It's amazing.
Now my question is it better than the upcoming HTML5 <canvas>? The only reason I ask is that it could be years before Microsoft implements a <canvas> that doesn't require a plugin for it to run.
And it will be even longer until all the IE users on the Internet get rid of their old browsers so that we can even justify using the HTML5 <canvas>.
I'm all about sticking to standards, but this one is just going to take too long, thanks to MS's slow development of their browser.
Thoughts?

Raphael is a vector graphics library, done using SVG, whereas HTML5 canvas is bitmap graphics.
If you want to do vector graphics, I think going with Raphael is probably a good choice over "just" canvas. As you say, canvas does not quite work with IE and it will probably be a while before it's natively supported. If Raphael does what you need, there is no particular reason not to use it.
Do note that there are also other libraries for this: Excanvas, which emulates canvas for IE using VML (as far as I know), and also some others which do the same with Silverlight and Flash but I forgot their names.
There's also Dojo, which has a component for abstracting canvas usage behind an easy to use interface, which also supports IE.
Having native canvas in all browsers will not make the libraries obsolete, since the libraries usually abstract some of the canvas complexities away, making the usage easier.

SVGWeb (http://code.google.com/p/svgweb/) by Google is what you want. It makes IE compatible with SVG, which is the standard, and which all other mainstream browsers already support. In other words, as google say, "Using the library plus native SVG support you can instantly target ~95% of the existing installed web base."

And you can use http://code.google.com/p/explorercanvas/ which implements the HTML5 Canvas Standard in IE. All you do is add:
<head>
<!--[if IE]><script src="excanvas.js"></script><![endif]-->
</head>
The difference between Canvas and SVG is explained as follows:
SVG and canvas aren't really
interchangeable technologies. SVG is a
type of retained mode graphics where
everything is drawn from a rather
abstract model (the SVG document).
Canvas on the other hand is a kind of
immediate mode graphics, where there
is no model and the client
(JavaScript) must take care of
redrawing, animations etc.

The answer depends on what you need:
if you need to add event handlers to the graphic objects: you need to use SVG. Else Canvas.
if no events are needed is performance important: if yes then Canvas 5.
Note that IE 9 supports Canvas and offers more HTML 5 support compare to other browsers!