Introduction to HTML5 <svg> Tag
किसी web page में graphics define करने के लिए HTML5 Canvas के अलावा SVG technology भी provide करती है। SVG का पूरा नाम scalable vector graphics है। यह एक XML based image format होता है। SVG को web pages में two dimensional vector based graphics draw करने के लिए use किया जाता है।
किसी webpage में graphics draw करने के लिए World Wide Web Consortium (W3C) SVG technology को ही recommend करता है। SVG आपको paths, boxes, circles, text और graphics images draw करने के लिए कई methods provide करती है।
Advantages of SVG
निचे SVG की कुछ advantages दी जा रही है।
- SVG images और उनकी presentation को XML file में define किया जाता है। इसका मतलब ये हुआ की SVG images किसी editor के माध्यम से edit की जा सकती है।
- SVG images के बारे में एक ख़ास बात यह होती है की अत्यधिक zoom करने पर भी इनकी quality ख़राब नहीं होती है।
- SVG images को web engines द्वारा search और index किया जा सकता है।
- SVG images को javascript द्वारा dynamically modify किया जा सकता है।
- SVG images को किसी भी resolution पर high quality के साथ print करना possible है।
- SVG के साथ आपको built in animation elements available है जिनके माध्यम से SVG images को animate किया जा सकता है।
दूसरे formats जैसे की JPEG, PNG और GIF आदि की तरह ही सब browsers SVG को support करते है। इसलिए आप निश्चिन्त होकर अपने webpages में इसे use कर सकते है।
Difference Between Canvas and SVG
SVG और Canvas दोनों ही technologies webpage में graphics draw करने के लिए use की जाती है। इनका सही उपयोग करने के लिए आपको इनके बीच का difference पता होना जरुरी है। निचे SVG और Canvas में difference बताया जा रहा है।
- SVG vector based होते है। इन्हें math से define किया जाता है और ये अलग अलग shapes से मिलकर बने होते है। Canvas के द्वारा draw किये गए graphics raster based होते है और pixels से मिलकर बने होते है।
- SVG में multiple graphical elements होते है जिन्हें DOM के द्वारा access किया जा सकता है। Canvas एक single HTML को represent करता है। यह <img> tag की तरह होता है।
- SVG को script के साथ साथ CSS द्वारा भी modify किया जा सकता है। Canvas graphics को CSS द्वारा modify करना संभव नहीं है।
- SVG को zoom करने पर इनकी quality ख़राब नहीं होती है। Canvas graphics को zoom करने पर वे धुँधले दिखते है।
- SVG को high resolution पर print किया जा सकता है। Canvas graphics को high resolution पर print नहीं किया जा सकता है।
SVG को draw करना canvas पर graphics draw करने से ज्यादा आसान और फायदेमंद है। क्योंकि इसके लिए आपको किसी प्रकार की script create करने की आवश्यकता नहीं होती है। Scripts से page की speed कम हो जाती है जो SEO की दृष्टि से ठीक नहीं है।SVG को किसी भी normal HTML element की तरह CSS द्वारा design किया जा सकता है।
Syntax of HTML5 <svg> Tag
HTML5 का <svg> tag SVG के लिए एक container का काम करता है। इस container में अलग अलग tags और attributes को use करते हुए graphics draw किये जाते है। इसका general syntax निचे दिया जा रहा है।
| <svg width=”” height=””> <graphics tag and its attributes> </svg> |
SVG container define करते समय उसकी width और height define करना अनिवार्य है। <svg> container में graphics create करने के लिए अलग अलग graphic tags available है।
- <line> – Line draw करने के लिए।
- <circle> – Circle draw करने के लिए।
- <rect> – Rectangle draw करने के लिए।
- <polygon> – Polygon draw करने के लिए।
- <text> – Text draw करने के लिए।
Canvas की ही तरह <svg> container में भी coordinates का origin top left corner होता है। इसलिए आप cx और cy attributes द्वारा क्रमशः left से दुरी और top से दुरी define करते है। इसके अलावा fill attribute का प्रयोग graphics को fill करने के लिए किया जाता है।
Example of HTML5 <svg> Tag
Drawing a Circle with SVG
निचे <svg> के माध्यम से circle draw करने का उदाहरण दिया जा रहा है।
| <html>
<body> <svg height=”200″ width=”200″> </body> </html> |
ऊपर दिए गए उदाहरण में r attribute circle की radius define करने के लिए use किया गया है। यह उदाहरण निचे दिया गया output generate करता है।
Drawing a Line with SVG
आइये अब SVG द्वारा line draw करना एक example से देखते है।
| <html>
<body> <svg height=”600″ width=”600″> </body> </html> |
ऊपर दिए गए उदाहरण में <svg> container में एक line draw की गयी है। Line draw करने के लिए line के starting और ending points define किये जाते है। जिन्हें x1,y1,x2,y2 द्वारा define किया जाता है। Line का color CSS की stroke property द्वारा और width CSS की stroke-width property द्वारा define किया जाता है। ये उदाहरण निचे दिया गया output generate करता है।
Drawing a Rectangle with SVG
SVG द्वारा rectangle draw करने का उदाहरण निचे दिया जा रहा है।
| <html>
<body> <svg width=”200″ height=”200″> </body> </html> |
ऊपर दिए गए उदाहरण में use की गयी fill property draw किये गए graphic को किस color से fill करना है ये define करने के लिए use की जाती है। ये उदाहरण निचे दिया गया output generate करता है।