HTML5 – Canvas vs SVG

There are fundamental differences between these technologies. SVG is closer to html mark up in its creation of elements. These SVG elements can be links or run javascript. Canvas is an image powered by Javascipt – on page HTML content can be used for interaction … <input onclick=”something();” type=”button” value=”do something” />… however elements don’t exist in the canvas. Instead javascript events go off and javascript ties into these events, which can provide a location within the canvas but the script needs to decide what was clicked on.

SVG links are formated in SEO semantics <a xlink:href=”http: or javascript:”>…</a>. Canvas links are virtually hidden, if they exist, from search engines.

Both animate; SVG animation is quicker; animation tags are used to modify the graphics with a specified destination and duration. Animations can be chained and begin times specified. The browser SVG rendering creates all of the in between locations for the animation; The designer only needs to be concerned with keyframes. Animations can also follow paths. Javascript may be used if required or desired.

Canvas animations need to be calculated frame by frame using javascript. The methods and DOM for accessing the canvas are standardized; Therefore we are looking at a similar type of environment as Adobe flash but with an open source, non-proprietary format. Adobe is working on web tools to create canvas graphics.

Inline svg requires browser updates for many — although svg image files can already be used.  Methods exist now to use SVG in a iframe on 95% of the browsers in use — but not inline embedded into the html code. The fall back for SVG is to render the SVG using flash.

Canvas on the other hand is ready for most browsers. Javascript libs exist to use Canvas on Internet Explorer using Microsoft’s proprietary VML to do the drawing. But the javascript engine used by older versions of Internet Explorer process to slow.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: