Examples of Use of SVG and Canvas
HTML5 Canvas and Scalable Vector Graphics (SVG) are very effective tools for creating interactive web graphics. Comparing the programming techniques of these two technologies can help you decide which one to choose. The annotated code samples and technical discussion in this tutorial will show you how.
In this section
| Topic | Description |
|---|---|
This topic compares how to use Canvas and SVG to develop an interactive pushbutton for use on a webpage. |
|
This section compares how to use Canvas and SVG to create a simple arcade game that can run in a webpage. |
|
This topic compares how to use Canvas and SVG to create interactive maps that can be displayed on a webpage. |
Windows Internet Explorer 9 provides Canvas and SVG to create fast, lightweight graphics in a webpage. This tutorial compares three key programming features of Canvas and SVG: user interfaces, games, and mapping. The purpose of this comparison is to demonstrate the different programming techniques of these features so you can choose which graphics system will work best for your web graphic needs. Six stand-alone annotated code samples have been provided that show the similarities and differences in greater detail.
The major similarities between Canvas and SVG are: they are both effective graphics tools that can be used to create fast, lightweight graphics that display in web pages, they each use JavaScript and HTML, and they both follow a W3C (World Wide Web Consortium) standard.
The major differences between these two technologies are: Canvas is a pixel-based, immediate mode graphics system that works best with a smaller surface or a larger number of objects; SVG is a shape-based, retained mode graphics system that works better with a larger surface or a smaller number of objects. Canvas and SVG also differ in how they can be modified. Once a Canvas object is drawn, it cannot be modified by scripting and CSS. However, because SVG objects are part of the Document Object Model, they can be modified by scripting and CSS at any time.
This tutorial is divided into three topics. Each topic contains two stand-alone annotated code samples, a Canvas version and an SVG equivalent. The first topic explains the basic principles of creating a user interface button. The second topic shows how to develop a simple arcade game program. The third explains how both technologies create interactive graphic maps. These code samples are followed by a technical discussion and links to further information. The code has been written as simply as possible to make it easier to analyze the basic principles of Canvas and SVG, and to show how they are similar and where they differ.
For more information about HTML5 Canvas, see CANVAS Element | canvas Object. For more information about SVG, see Scalable Vector Graphics (SVG).