1. Technology

How is the CANVAS Element Different from SVG and Flash

Understanding Your Options for Interactive Graphics on the Web


Canvas vs. SVG vs. Flash

Canvas vs. SVG vs. Flash

Image © 2012 J Kyrnin - licensed to About.com

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 CANVAS.

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.

The HTML5 CANVAS element is a third option. This element is HTML, not XML, and uses JavaScript to create the images and animation. So you don’t need to learn how to use a new program or language.

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.
Graphics type The CANVAS element creates bitmap graphics on the screen, but it can draw vectors. Most are created by manually writing the JavaScript. SVG, or scalable vector graphics, is a vector graphics tool, but it can use bitmap files like JPG or PNG. Flash is completely vector based, but it is possible to slip bitmap images into your Flash files.
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.
Required technology The CANVAS element uses JavaScript to show the images. If JavaScript is disabled, the CANVAS will be blank. SVG requires modern browsers that support XML or SVG rendering. Flash requires a plug-in to display the images.
Speed CANVAS is very fast to render images, but it does require parsing of JavaScript. SVG, when used inline in HTML5, ia very fast because it doesn’t require amu extra downloads or parsing. Flash is the slowest, requiring download time of both the SWF file and the embedding.
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.
  1. About.com
  2. Technology
  3. Web Design / HTML
  4. HTML and XHTML
  5. HTML 5
  6. HTML 5 Tutorials
  7. How is the CANVAS Element Different from SVG and Flash

©2014 About.com. All rights reserved.