- SVG stands for Scalable Vector Graphics.
- SVG used for vector type diagrams like pie charts, 2-Dimensional graphs in an X,Y coordinate system.
- Html SVG images and their behaviors are defined in XML text files. So as XML files, you can create and edit an SVG image with text editor.
- SVG images searched, compressed,indexed, scripted and modified using JavaScript in real time.
If you want to draw a circle:
If you want to draw Rectangle:
SVG Line:
Drawing Text with SVG:
SVG is an image format for vector graphics.what you work within Adobe Illustrator. You can use SVG on the web pretty easily, but there are some points you should know:
Purpose of SVG at all?
Small file sizes that compress better.
Scales to any size without enhancing clarity (except very tiny).
Looks proper on retina displays.
Design with control like interactivity and filters.
Purpose of SVG at all?
Small file sizes that compress better.
Scales to any size without enhancing clarity (except very tiny).
Looks proper on retina displays.
Design with control like interactivity and filters.
NOTE: The attribute like xmlns is only required on the outermost SVG element of SVG documents.
Difference between canvas and svg:
| Sr.No. | Canvas | Svg |
|---|---|---|
| 1 | Single elements similar to |
Multiple graphical elements, which become the part of the page's DOM tree |
| 2 | Suitable for larger amount of objects or smaller surface, or both. | Suitable for smaller number of objects or larger surface, or both. |
| 3 | Raster based (composed of pixel). | Vector based (composed of shapes). |
| 4 | Poor scalability. Not suitable for printing when its come to higher resolution. Pixelation may be occur. | Better scalability. Can be printed with high quality at any resolution. Pixelation may not occur. |
Embedding SVG in HTML5:
The folliwing method show how to embedd code in HTML5