html5 svg
TRANSCRIPT
![Page 2: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/2.jpg)
HTML5 SVG (Scalable Vector Graphics )
Outlines
![Page 3: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/3.jpg)
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
What is SVG?
![Page 4: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/4.jpg)
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)
SVG Advantages
![Page 5: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/5.jpg)
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;fill-rule:evenodd;" /></svg>
Embed SVG Directly Into HTML Pages
![Page 6: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/6.jpg)
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>
SVG Shapes
![Page 7: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/7.jpg)
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>
SVG Rectangle - <rect>
![Page 8: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/8.jpg)
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
Code explanation:
![Page 9: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/9.jpg)
<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>
SVG Ractangle <rect> Example 2
![Page 10: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/10.jpg)
<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)
SVG Ractangle <rect> Example 3
![Page 11: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/11.jpg)
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>
SVG <circle>
![Page 12: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/12.jpg)
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
SVG <circle>
![Page 13: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/13.jpg)
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:
SVG Ellipse - <ellipse>
![Page 14: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/14.jpg)
<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
SVG Ellipse - <ellipse>
![Page 15: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/15.jpg)
<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>
SVG Ellipse - <ellipse>
![Page 16: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/16.jpg)
SVG Ellipse - <ellipse>
![Page 17: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/17.jpg)
SVG <line> 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>
![Page 18: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/18.jpg)
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
Code explanation:
![Page 19: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/19.jpg)
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).
SVG <polygon>
![Page 20: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/20.jpg)
<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>
SVG <polygon>
![Page 21: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/21.jpg)
<svg height="250" width="500"> <polygon points="220,10 300,210 170,250 123,234" style="fill:lime; stroke:purple;stroke-width:1" /></svg>
SVG <polygon> Example 2
![Page 22: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/22.jpg)
<svg height="250" width="500"> <polygon points="220,10 300,210 170,250 123,234" style="fill:lime; stroke:purple;stroke-width:1" /></svg>
SVG <polygon> Example 3
![Page 23: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/23.jpg)
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>
SVG <polygon> Example 4
![Page 24: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/24.jpg)
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>
SVG <polyline>
![Page 25: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/25.jpg)
<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>
SVG <polyline> Example 2
![Page 26: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/26.jpg)
What is difference between SVG and Canvas?
Assignment
![Page 27: Html5 SVG](https://reader035.vdocuments.us/reader035/viewer/2022081504/5560b521d8b42af93b8b49d3/html5/thumbnails/27.jpg)
http://www.w3schools.com/svg/default.asp
References