SVG Tag
Advertisements
<svg> tag
Html5 introduce new tag <svg>, SVG stands for Scalable Vector Graphics. It is used to define graphics for the Web. <svg> tag is container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images. It is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in an X,Y coordinate system etc.
Draw circle using svg tag
To draw a circle you need <circle> tag with cx, cy and r attributes.
Example
<!DOCTYPE> <html> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" /> </svg> </body> </html>
Result
Draw rectangle using svg tag
To draw a rectangle you need <rect> tag with it's attributes.
Example
<!DOCTYPE> <html> <body> <svg width="200" height="100"> <rect width="200" height="100" stroke="yellow" stroke-width="4" fill="red" /> </svg> </body> </html>
Result
Draw polygon using svg tag
To draw a polygon you need <polygon> tag with points attribute of polygon tag.
Example
<!DOCTYPE> <html> <body> <svg width="210" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:red;stroke:yellow;stroke-width:5;fill-rule:nonzero;" /> </svg> </body> </html>
Result
Browser supported
| Element | |||||
| <svg> | Yes | Yes | Yes | Yes | Yes |
Why SVG is more preferred over other image formats ?
Due to following advantage with SVG web developers use this;
- SVG images can be saved as the smallest size, unlike png, jpge and other image formate.
- It does not contains fixed set of dots so it is easily print with high resolution.
- SVG image can zoom a certain level without decrease the picture quality.
- You can easily edit SVG image with using any text editor.
Google Advertisment