SVG/ Canvas Examples

Overview

Some thoughts and resources of interest

One should note that the <canvas> element and <svg> are not the same. The former appears to render as pixels and the latter renders as vectors in most browsers (of course, nothing renders well in IE at this point in time). IE 9 is a vast improvement (I have worked a bit with the beta version at this point). For most browsers, one needs to apply a healthy dose of JavaScript to implement much in the way of graphics.

Examples of SVG images

  

Yes, I used inline frames so these items would appear in most current browsers.

T-shirt example from Adobe (courtesy of Paul Trani) - used with permission (click on the color selectors to see the effects of changing the color of either the graphic or shirt). I have noticed that in some browsers, one needs to reload the image a second time in order to see all the SVG graphics. Note this is done with JavaScript within the SVG itself. [This example will open in a new browser window/ tab and may take a moment for the SVG to actually load.] [This example works best in the Webkit rendering engine, partially in Gecko and Presto, and doesn't display in Trident].

Additional examples from Adobe (courtesy of Paul Trani) - used with permission. [Each will open in a new browser window/ tab.] Don't forget to view the source code to learn more about how these examples actually work.

Examples from O'Reilly HTML5 Mobile class and Mozilla Documentation.

    • Example 01 - drawing simple shapes (slightly modified from O'Reilly class) [Will open in a new window/ tab since majority is <canvas> element only].
    • Example 02 - drawing simple shapes (slightly modified from Mozilla documentation site) [Will open in a new window/ tab since majority is <canvas> element only].