SVG का अर्थ स्केलेबल वेक्टर ग्राफिक्स है और यह XML में 2D-ग्राफिक्स और ग्राफिकल एप्लिकेशन का वर्णन करने की एक भाषा है जिसे SVG व्यूअर द्वारा रेंडर किया जाता है।
SVG ज्यादातर वेक्टर प्रकार के डायग्राम जैसे पाई चार्ट, X,Y कोऑर्डिनेट सिस्टम में दो-आयामी ग्राफ आदि के लिए उपयोगी है।
HTML5 में स्केलेबल वेक्टर ग्राफिक्स (SVG) के साथ काम करने के लिए, निम्न सिंटैक्स के साथ <svg>...</svg> टैग्स का उपयोग करके सीधे SVG एम्बेड करें:
सिंटैक्स
<svg xmlns="https://www.w3.org/2000/svg"> ... </svg>
HTML5 SVG में आकार बनाने के लिए उपयोग करें:
<circle>एलिमेंट - सर्कल बनाने के लिए<rect>एलिमेंट - आयत बनाने के लिए<line>एलिमेंट - रेखा बनाने के लिए<ellipse>एलिमेंट - दीर्घवृत्त बनाने के लिए<polygon>एलिमेंट - बहुभुज बनाने के लिए
आप <img>, <iframe>, <object> या <embed> टैग का उपयोग करके भी SVG को वेब पेज में जोड़ सकते हैं।
उदाहरण
HTML5 में SVG के साथ काम करना सीखने के लिए निम्न कोड चलाएं। यहां हम एक सर्कल बनाएंगे:
<!DOCTYPE html> <html> <head> <style> #svgelem { position: relative; left: 10%; -webkit-transform: translateX(-20%); -ms-transform: translateX(-20%); transform: translateX(-20%); } </style> <title>HTML5 SVG सर्कल</title> </head> <body> <h2>HTML5 SVG सर्कल</h2> <svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg"> <circle id="greencircle" cx="60" cy="60" r="50" fill="green" /> </svg> </body> </html>
