HTML Graphics

In HTML, vector graphics is supported using various technologies such as Silver light, Flash etc.

HTML5 supports vector graphics with two in-built elements. These are:
<canvas>
<svg>

Let’s move further with some information about HTML Canvas and HTML SVG.


<canvas>

This HTML5 element allows you to draw graphics on a web page.
It is just a container for graphics, where you have to a script (usually JavaScript) to draw the graphics.
It has various methods to draw paths, boxes, circles, text and even to add images.
It is always used with the id, width and height attributes.


id - This attribute is used to set some id to access and locate the canvas from JavaScript.
width - This attribute is used to define the width of the canvas.
height - This attribute is used to define the height of the canvas.

Example:

<canvas id="samplecanvas" width="200" height="150">
....................
</canvas>

You can have more than one <canvas> element in one HTML page.

HTML Canvas is used:

● To draw colorful text, with or without animation

● To draw graphical data representation, like graphs and charts.

● To draw simple to complex animations

● To develop HTML gaming applications

● To respond to various user actions, such as clicks on keyboard, mouse, button and a movement of a finger


By default, this element has no border and content. But, you can add a border to the canvas using a style attribute.

Example:

<canvas id="samplecanvas" width="200" height="150" style="border:2px solid black;">

....................

</canvas>

You can get this element with JavaScript with the help of getElementById() method.

var canvas = document.getElementById(“samplecanvas”)

Other things you should know about Canvas

● The view of a canvas completely depends on resolution, which means in each resolution it looks in some different way.

● This element does not support event handlers.

● This element is not so good for text rendering.

● The resulting image can be saved as .png or .jpg

● It is suitable for graphic-intensive games.

<svg>

SVG stands for Scalable Vector Graphics and is used to define vector-based graphics in XML format. Each element and each attribute in SVG files can be animated.

SVG graphics provides high quality whether the images are zoomed or resized, the resolution quality remains the same.

It is basically used for vector type diagrams, such as bar charts, 2D-graphics, graphical applications etc.

Example:

<!DOCTYPE html>
<html>
<body>
<svg width="10" height="100">

<circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />

</svg>
</body>
</html>

Benefits of using SVG

Here, you will get to know some benefits of using SVG as compared to other image formats, such as jpeg, gif and others.

● You can create and edit SVG images with any text editor.

● It is easy to search, index, script and compress SVG images.

● Such images are scalable

● Such images are zoomable

● These images can be printed with high quality despite of any resolution

● SVG files are wholesome XML