HTML5 Graphics

This section contains HTML5 graphics information, samples, and tutorials.

In this section

Topic Description

SVG vs canvas: how to choose

Starting at a high level, this topic provide a comparison of SVG and Canvas, then proceeds to discuss a number of comparative code examples, such as ray tracing and green screening.

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.

HTML5 Canvas

This section contains HTML5 Canvas information, samples, and tutorials.

SVG

SVG, a W3C recommendation, is a language for describing two-dimensional graphics in XML. SVG allows for three types of graphic objects: vector graphic shapes (for example, paths that consist of straight lines and curves), images, and text. Graphical objects (including text) can be grouped, styled, transformed and composited into previously rendered objects. The SVG feature set includes nested transformations, clipping paths, alpha masks, and template objects.

 

Internet Explorer 9 Samples and Tutorials