If you are considering adding interactive graphics and animation to your web pages, there are several options you can choose from.
Flash has been around a long time and there are many good reasons to continue to use it. It is widely used, people are used to it, there are many pre-written animations and tutorials available, and many developers to create the animations. The problem is that Flash is being phased out of mobile devices. iOS (iPhone, iPad, iPad, etc.) does not support Flash, and while there are apps to view simple Flash videos out there, Adobe has announced that they are going to discontinue Flash player support in Android 4.1.
So, if you were going to use Flash on a mobile site, you will need to come up with a new solution. But what are your options? The two best are SVG and
SVG, or scalable vector graphics, is an XML format used to describe vector graphics. It has been around for a while, and there are many programs out there, like Illustrator, you can use to generate SVG files without needing to learn XML.
With HTML5, you can place SVG XML right inline in the HTML and it will display in any HTML5 compliant browser. This makes it fairly easy to use, as you just build your animation in a vector graphics program, save it as SVG, and paste that SVG into your HTML5 document.
How to Choose Review the Features of CANVAS, SVG, and Flash
|Where does it work?||CANVAS elements work on any HTML5 web browser. While they don’t work in IE before version 9, they do work on iOS and Android smartphones and tablets.||SVG work in most modern browsers, with IE not supporting it until version 9. It also works on iOS and Android smartphones and tablets.||Flash works in any browser that has a plugin for it. However, Safari for Mac 10.7 (Lion) does not ship with the Flash plugin, and Adobe is no longer supporting Flash on mobile devices.|
|How to create||Most CANVAS creation is done by hand, but some illustration programs are getting HTML5 support, usually with plug-ins.||Most vector graphics programs can out put the files as SVG.||There are many commercial applications available to author Flash animations.|
|Inline HTML||The CANVAS element is an HTML5 element and so is automatically used in HTML.||SVG has some browser support for inline elements in HTML5 (IE 9, FF 12, Chrome 19, and Safari 5.1), but is XML and generally is embedded.||Flash files are embedded as SWF files and use a browser plug-in to work.|
|SEO||CANVAS is text based and it can all be read by search engines.||SVG is text based and it can all be read by search engines.||Flash is an embedded SWF file which can be difficult for search engines to parse.|
|What can be interactive||No individual items are clickable in a CANVAS, only the entire element.||SVG allows for clicking of items within the graphic.||Flash can have clickable points created anywhere in the file.|