1. nisa1207@gmail.com

2. 
HTML5 SVG (Scalable Vector Graphics )

3. 





SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for
the Web
SVG defines the graphics in XML format
SVG graphics do NOT lose any quality if they are
zoomed or resized
Every element and every attribute in SVG files can
be animated
SVG is a W3C recommendation

4. Advantages of using SVG over other image
formats (like JPEG and GIF) are:





SVG images can be created and edited with any text editor
SVG images can be searched, indexed, scripted, and
compressed
SVG images are scalable
SVG images can be printed with high quality at any resolution
SVG images are zoom able (and the image can be zoomed
without degradation)

5. In HTML5, you can embed SVG elements directly
into your HTML page:
<svg width="300" height="200">
<polygon points="100,10 40,180 190,60 10,60
160,180"
style="fill:lime;stroke:purple;stroke-width:5;fillrule:evenodd;" />
</svg>

6. 







SVG has some predefined shape elements
that can be used by developers:
Rectangle <rect>
Circle <circle>
Ellipse <ellipse>
Line <line>
Polyline <polyline>
Polygon <polygon>
Path <path>

7. The <rect> element is used to create a
rectangle and variations of a rectangle shape:
<svg width="400" height="110">
<rect width="300" height="100"
style="fill:rgb(0,255,256);stroke-width:3;
stroke:rgb(0,0,0)">
 Sorry, your browser does not support inline
SVG.
 </svg>


8. 




The width and height attributes of the <rect>
element define the height and the width of
the rectangle
The style attribute is used to define CSS
properties for the rectangle
The CSS fill property defines the fill color of
the rectangle
The CSS stroke-width property defines the
width of the border of the rectangle
The CSS stroke property defines the color of
the border of the rectangle

9. <svg width="400" height="180">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink; stroke-width:5;
fill-opacity:0.2;stroke-opacity:0.9">
Sorry, your browser does not support inline SVG.
 </svg>

10. <svg width="400" height="180">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.5">
Sorry, your browser does not support inline SVG.
</svg>
The CSS opacity property defines the opacity value for
the whole element (legal range: 0 to 1)

11. 
The <circle> element is used to create a
circle:
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black"
stroke-width="3" fill="blue" />
Sorry, your browser does not support inline
SVG.
</svg>

12. 


Code explanation:
The cx and cy attributes define the x and y
coordinates of the center of the circle. If cx
and cy are omitted, the circle's center is set to
(0,0)
The r attribute defines the radius of the circle

13. 

The <ellipse> element is used to create an
ellipse.
An ellipse is closely related to a circle. The
difference is that an ellipse has an x and a y
radius that differs from each other, while a
circle has equal x and y radius:

14. <svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;
stroke-width:2" />
</svg>




The cx attribute defines the x coordinate of the
center of the ellipse
The cy attribute defines the y coordinate of the
center of the ellipse
The rx attribute defines the horizontal radius
The ry attribute defines the vertical radius

15. <svg height="150" width="500">
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:purple" />
<ellipse cx="220" cy="70" rx="190" ry="20"
style="fill:lime" />
<ellipse cx="210" cy="45" rx="170" ry="15"
style="fill:yellow" />
Sorry, your browser does not support inline
SVG.
</svg>

17. 
The <line> element is used to create a line:
<svg height="210" width="500">
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2" />
Sorry, your browser does not support inline
SVG.
</svg>

18. 



The x1 attribute defines the start of the line
on the x-axis
The y1 attribute defines the start of the line
on the y-axis
The x2 attribute defines the end of the line
on the x-axis
The y2 attribute defines the end of the line on
the y-axis

19. 


Polygon comes from Greek. "Poly" means
"many" and "gon" means "angle".
The <polygon> element is used to create a
graphic that contains at least three sides.
Polygons are made of straight lines, and the
shape is "closed" (all the lines connect up).

20. <svg height="210" width="500">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1"
/>
Sorry, your browser does not support inline
SVG.
</svg>

21. <svg height="250" width="500">
<polygon points="220,10 300,210 170,250
123,234" style="fill:lime; stroke:purple;
stroke-width:1" />
</svg>

22. <svg height="250" width="500">
<polygon points="220,10 300,210 170,250
123,234" style="fill:lime; stroke:purple;
stroke-width:1" />
</svg>

23. Change the fill-rule property to "evenodd":
<svg height="210" width="500">
<polygon points="100,10 40,180 190,60
10,60 160,180“ style="fill:lime; stroke:purple;
stroke-width:5;fill-rule:evenodd;" />
</svg>

24. The <polyline> element is used to create any
shape that consists of only straight lines:
<svg height="200" width="500">
<polyline points="20,20 40,25 60,40 80,120
120,140 200,180“ style="fill:none;
stroke:black; stroke-width:3" />
</svg>


25. <svg height="180" width="500">
<polyline points="0,40 40,40 40,80 80,80
80,120 120,120 120,160“ style="fill:white;
stroke:red;stroke-width:4" />
</svg>


26. 
What is difference between SVG and Canvas?

27. 
http://www.w3schools.com/svg/default.asp