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
INPUT :
<!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 > |
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 > |
OUTPUT :
Drawing A SVG Rounded Rectangle in HTML
INPUT :
<!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 > |
OUTPUT :
Drawing A SVG Star in HTML
INPUT :
<!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 > |
OUTPUT :
Drawing A Logo in HTML using SVG
INPUT :
<!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 > |
OUTPUT :
leave a comment
0 Comments