SVG or Canvas for your HTML5?

These two elements are embedded in the HTML , and are often used to create animation, games, visual to-date, interactive, etc.. For their support on the browser, refer to: Canvas and SVG.

Below we list an outline of the main features without detailing too much the code.

CANVAS

Literally Canvas: acts just like a canvas for a painter, delimits, i.e. the area in which you will be able to draw (in both 2D and 3D, even if the latter is not supported by most browsers).

Is an element/bitmap programmable, so it acts only on pixels (raster). Being generated through programming is not so for everyone.

His “reaction to events” (event handler) that occurs in the document is only to regenerate the whole scene, ridisegnandola. The animation then takes place frame by frame.

The Canvas depends on JavaScript, so if the latter is disabled, or the user uses a reader/interpreter will not be displayed.

It is suitable for dynamic applications type games, and animations-intensive, faster loading, and independent of the DOM.

Here are some JavaScript libraries for animation in Canvas: processingjs, kinetic.js, paper.js, fabric.js

To draw a line through Canvas, to start simply with:

<canvas id=”example” width=”300″ height=”300″>

 <!– If your browser does not support Canvas, is to report to the user –>

 <!– You can enter a content “fallback” (text, images, flash, etc..) –>

 <p>your browser does not support HTML5 Canvas.</p>

</canvas>

Below is the JavaScript code to insert at the bottom of the HTML code:

var canvas = document.getElementById(‘example’),

context = canvas.getContext(‘2d’);

 // the code that will draw will be inserted below…

context.beginPath();

context.moveTo(50, 50);

context.lineTo(250, 150);

context.stroke();

The generated image will be this:

SVG or Canvas for your HTML5?

SVG

Is the basis vector, and scalable and very good for high resolution screens.

The images are generated through XML, easy to create without programming experience. You can use the following programs/tools:

The images created in SVG are added to the DOM and can be modified by using Javascript and Css, also with the events that you have on the other elements of the document.

The animations act on the “drawing” itself, you can then define the transformations on it and it does not require you to regenerate the element to the SVG.

You should use SVG for animations and intensive games, because, being integrated into the DOM, have longer loading times of the increase of the complexity of the document. Are usually used for animated icons, and interactive charts are not too complex.

On the SEO side of the SVG are more accessible because they support the text.

Two of the most used JavaScript libraries for animation and the management of visual-data in SVG are d3.js and raphael.

Example to draw a circle with a border using SVG:

<svg width=”100″ height=”100″>

 <circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow” />

</svg>

The generated image will be this:

SVG or Canvas for your HTML5?