HTML5 SVG Tutorial
SVG is stand for Scalable Vector Graphics.The SVG is employed to define vector based graphics or diagrams like- pie charts, 2-d graphs etc.SVG is different from raster-based graphics, which store the color definition for each pixel in an array of data. The most common raster-based formats used on the web today are JPEG, GIF, and PNG, and each of these formats has strengths and weaknesses.
Various advantages of SVG are as follows:
SVG graphics are created using mathematical formulas that require far less data to be stored in the source file.
SVG graphics load faster because the source file size tends to be smaller.
SVG images are rendered by the browser and can be drawn programmatically.
The graphics of SVG is in XML format.
The SVG images can be printed with high quality at any resolution
Syntax of SVG:-
Example:
SVG Different from Canvas:
SVG is a language for describing 2D graphics in XML whereas Canvas draws 2D graphics.
In SVG every drawn shape is remembered as an object. If attributes of an html5 SVG tutorial object are modified the browser will automatically re-render the shape.Canvas is rendered pixel by pixel. In canvas once the graphic is drawn it is forgotten by the browser. If its position ought to be modified the complete scene must be redrawn together with any objects that might have been covered by the graphic.
