A Comparison of Canvas and SVG

By Patrick_Dengler | 26 Oct 2011
This article is an extract of the original one from The Code Project. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

Canvas and SVG are two exciting graphics features introduced in Internet Explorer 9 and are hardware accelerated. These technologies can be used to address a range of graphic scenarios on the modern Web.

The following is a high-level summary of Canvas and SVG meant to frame a discussion of when to use one particular vector graphic technology over the other.



A Comparison of Canvas and SVG
CanvasSVG
Pixel-based (canvas is essentially an image element with a drawing API)Object Model-based (SVG elements are similar to HTML elements)
Single HTML element similar <IMG>  to in behavior
Multiple graphical elements which become part of the Document Object Model (DOM)
Visual presentation created and modified programmatically through scriptVisual presentation created with markup and modified by CSS or programmatically through script
Event model/user interaction is coarse—at the canvas element only; interactions must be manually programmed from mouse coordinatesEvent model/user interaction is object-based at the level of primitive graphic elements—lines, rectangles, paths
API does not support accessibility; markup-based techniques must be used in addition to canvasSVG markup and object model directly supports accessibility




SVG is known as a retained mode graphics model persisting in an in-memory model. Analogous to HTML, SVG builds an object model of elements, attributes, and styles. When the Canvas is a bitmap with an immediate mode graphics application programming interface (API) for drawing on it. Canvas is a “fire and forget” model that renders its graphics directly to its bitmap and then subsequently has no sense of the shapes that were drawn; only the resulting bitmap stays around.

One way to think of these is that Canvas resembles the Windows GDI API, where you programmatically draw graphics to a window, and SVG resembles HTML markup with elements, styles, events, and DOM-based programmability. Canvas is procedural whereas SVG is declarative.


Example of code using CANVAS:


function GreenScreenAtoB(a, b) {
   var aImageData = a.getImageData(0, 0, a.canvas.width, a.canvas.height);
   var bImageData = b.getImageData(0, 0, b.canvas.width, b.canvas.height);
   var aPixels = aImageData.data;
   var bPixels = bImageData.data;

if (aPixels.length != bPixels.length) {
window.alert("Canvases do not have the same number of pixels");
return bImageData;
}

var pixelCount = bPixels.length;
for (var pixelIndex = 0; pixelIndex < pixelcount; pixelIndex += 4) {
// grab the RGBA components of each pixel in b
var r = bPixels[pixelIndex + 0];
var g = bPixels[pixelIndex + 1];
var b = bPixels[pixelIndex + 2];
var a = bPixels[pixelIndex + 3];

// if the b pixel is green, replace it with a pixel from a
if (r == 0 && g == 255 && b == 0 && a == 255) {
bPixels[pixelIndex + 0] = aPixels[pixelIndex + 0];
bPixels[pixelIndex + 1] = aPixels[pixelIndex + 1];
bPixels[pixelIndex + 2] = aPixels[pixelIndex + 2];
bPixels[pixelIndex + 3] = aPixels[pixelIndex + 3];
}
}

return bImageData;
}

READ MORE HERE >>>








License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

No comments:

Post a Comment