SVG and Canvas in HTML5

SVG

• It stands for Scalable Vector Graphics.
• It is used to define graphics for the web.
• It is also define graphics of xml format so users can use text editor after create the svg images.
• It is built into the document using elements, attributes and styles.
• While SVG can be delivered as a standalone file, the initial focus is on its natural integration with HTML.
• Users can use text editor for svg.

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

The <height> and <width> attributes define the height and width of  the <svg> element.
The <circle> element is to draw a circle.
The <cx> and <cy> attributes are the x and y axis of the center of the circle.
The <r> attribute is radius of the circle.
The <stroke> is the color of the circle line and the <stroke-width> is the border of the line.
The <fill> is the color of the circle.


Canvas

• It is used to draw graphic.
• It present bitmap images with JavaScript. (pixel based)
• It is introduced by Apple for Safari, and other graphical widgets.
• The images in canvas are deleted after rendering to the browser. If the image is changed,  a user needs to re-invoke the image to draw a entire scene.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid black;"> </canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>