SVG - Scalable Vector Graphics

SVG Introduction

SVG is short for Scalable Vector Graphics. It is a graphic format in which the shapes are specified in XML. The XML is then rendered by an SVG viewer. Today most web browser can display SVG just like they can display PNG, GIF, and JPG.
Internet Explorer 8 (and earlier) users may have to install the Adobe SVG Viewer to be able to view SVG in the browser. IE 9+, Chrome and Firefox all support SVG natively.
SVG is for 2-dimensional vector graphics. For a 3-dimensional format lookup X3D.
If you are not sure if SVG is right for you or your project, take a quick look at the SVG Examples page to get a quick overview at the capabilities of SVG.

SVG is for Vector Graphics

Being a vector graphics format SVG is mostly useful for vector type diagrams like:

1. Two-dimensional graphs in an X,Y coordinate system.
2. Column charts, pie charts etc.
3. Scalable icons and logos for web, tablet and mobile apps and webapps.
4. Architecture and design diagrams
5. etc.

Being a "Vector Graphics" format the shapes to be displayed are stored as vectors or vector-like structures. In other words, as numbers. Not as pixels.
Being "Scalable" means that the viewer can scale the SVG image up and down in size without loss of quality. This is possible because the graphics are defined as numbers instead of pixels. Scaling the SVG image up or down just means multiplying or dividing the numbers defining the SVG shapes.
SVG is not ideal for bitmap graphics like photos, movies etc. although you can embed bitmap graphics in an SVG image. This can be a handy way to draw shapes or text ontop of a bitmap image.


Best and Easy Tutorial found at : http://tutorials.jenkov.com/svg/index.html