Monday, 20 July 2015

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:-

<svg xmlns=”http://fullyhelp.com/tag/wp-content/uploads/2013/11/wheel.png” >
</svg>

Example:

<html>
<body><svg xmlns=”http://fullyhelp.com/tag/wp-content/uploads/2013/11/wheel.png” >
</svg></body>
</html>

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.

Attribute Value Description
title text It specifies a title to keep company with the component,several browser can show this once the pointer hovers the component.
id id It defines unique id for an element.
class classname It defines the element class name.
lang URL It Sets the language code.
style style_definition It defines Helps to include inline cascading style sheet.

No comments:

Post a Comment