HTML | SVG-Basics
What is SVG?
- SVG stands for Scalable Vector Graphics.
- It basically defines vector-based 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.
What are the advantages of SVG?
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.
Differences between HTML SVG and HTML Canvas
- SVG is a language for describing 2D graphics in XML whereas Canvas draws 2D graphics, on the fly with a JavaScript.
- If attributes of an SVG object are changed, the browser can automatically re-render the shape whereas Canvas is rendered pixel by pixel.In canvas, once the graphic is drawn, it is forgotten by the browser.
- SVG is resolution independent whereas CANVAS is resolution dependent.
- SVG supports event handlers whereas CANVAS doesnt have a support for event handlers.
Drawing A SVG Circle in HTML
Example:
<!DOCTYPE html> <html> <body> <svg width="200" height="200"> <circle cx="80" cy="80" r="50" stroke="black" stroke-width="2" fill="grey" /> </svg> </body> </html> |
chevron_right
filter_none
OUTPUT :
Drawing A SVG Rectangle in HTML
INPUT :
<!DOCTYPE html> <html> <body> <svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /> </svg> </body> </html> |
chevron_right
filter_none
OUTPUT :
Drawing A SVG Rounded Rectangle in HTML
Example :
<!DOCTYPE html> <html> <body> <svg width="400" height="380"> <rect x="80" y="20" rx="20" ry="20" width="150" height="150" style="fill:orange;stroke:black;stroke-width:2;opacity:0.5" /> </svg> </body> </html> |
chevron_right
filter_none
OUTPUT :
Drawing A SVG Star in HTML
Example:
<!DOCTYPE html> <html> <body> <svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:grey;stroke:orange;stroke-width:5;fill-rule:evenodd;" /> </svg> </body> </html> |
chevron_right
filter_none
OUTPUT :
Drawing A Logo in HTML using SVG
Example:
<!DOCTYPE html> <html> <body> <svg height="300" width="700"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:white;stop-opacity:1" /> <stop offset="100%" style="stop-color:green;stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="200" cy="100" rx="120" ry="80" fill="url(#grad1)" /> <text fill="#ffffff" font-size="22" font-family="ARIAL" x="120" y="110">GeeksForGeeks</text> </svg> </body> </html> |
chevron_right
filter_none
OUTPUT :
Supported Browser: Supported browsers are listed below
- Google Chrome 4.0
- Internet Explorer 9.0
- Firefox 3.0
- Opera 10.1
- Safari 3.2
