एचटीएमएल एसवीजी ग्राफिक्स
एसवीजी एक्सएमएल प्रारूप में वेक्टर-आधारित ग्राफिक्स को परिभाषित करता है।
एसवीजी क्या है?
- SVG का मतलब स्केलेबल वेक्टर ग्राफिक्स है
- SVG का उपयोग वेब के लिए ग्राफ़िक्स को परिभाषित करने के लिए किया जाता है
- SVG एक W3C अनुशंसा है
एचटीएमएल <svg> तत्व
HTML <svg>तत्व SVG ग्राफिक्स के लिए एक कंटेनर है।
SVG में पथ, बॉक्स, वृत्त, पाठ और ग्राफिक चित्र बनाने के लिए कई विधियाँ हैं।
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से
<svg>तत्व का समर्थन करता है।
| Element | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
एसवीजी सर्किल
उदाहरण
<!DOCTYPE html>
<html>
<body>
<svg
width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green"
stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
एसवीजी आयत
उदाहरण
<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>
एसवीजी गोल आयत
उदाहरण
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20"
width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
एसवीजी स्टार
उदाहरण
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
एसवीजी लोगो
उदाहरण
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%"
y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"
/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55"
fill="url(#grad1)" />
<text fill="#ffffff" font-size="45"
font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not
support inline SVG.
</svg>
एसवीजी और कैनवास के बीच अंतर
एसवीजी एक्सएमएल में 2डी ग्राफिक्स का वर्णन करने के लिए एक भाषा है।
कैनवास 2डी ग्राफिक्स बनाता है, मक्खी पर (जावास्क्रिप्ट के साथ)।
एसवीजी एक्सएमएल आधारित है, जिसका मतलब है कि हर तत्व एसवीजी डोम के भीतर उपलब्ध है। आप किसी तत्व के लिए JavaScript ईवेंट हैंडलर संलग्न कर सकते हैं।
एसवीजी में, प्रत्येक खींची गई आकृति को एक वस्तु के रूप में याद किया जाता है। यदि किसी SVG ऑब्जेक्ट की विशेषताओं को बदल दिया जाता है, तो ब्राउज़र स्वचालित रूप से आकृति को फिर से प्रस्तुत कर सकता है।
कैनवास पिक्सेल द्वारा पिक्सेल प्रदान किया जाता है। कैनवास में, एक बार ग्राफिक तैयार हो जाने के बाद, इसे ब्राउज़र द्वारा भुला दिया जाता है। यदि इसकी स्थिति बदल दी जानी चाहिए, तो पूरे दृश्य को फिर से खींचा जाना चाहिए, जिसमें कोई भी वस्तु शामिल है जो ग्राफिक द्वारा कवर की गई हो।
कैनवास और एसवीजी की तुलना
नीचे दी गई तालिका कैनवास और एसवीजी के बीच कुछ महत्वपूर्ण अंतर दिखाती है:
| Canvas | SVG |
|---|---|
|
|
एसवीजी ट्यूटोरियल
एसवीजी के बारे में अधिक जानने के लिए, कृपया हमारा एसवीजी ट्यूटोरियल पढ़ें ।