HTML SVG Graphics

HTML SVG वेक्टर ग्राफ़िक्स सीखें

SVG (Scalable Vector Graphics)

एसवीजी एक्सएमएल में वेक्टर-आधारित ग्राफिक्स को परिभाषित करता है जिसे सीधे HTML पृष्ठों में एम्बेड किया जा सकता है।

एसवीजी ग्राफिक्स स्केलेबल हैं

यदि उन्हें बड़ा किया जाए या उनका आकार बदला जाए तो कोई गुणवत्ता नष्ट नहीं होती:

SVG

स्केल प्रदर्शित करने के लिए कर्सर को ऊपर SVG पर रखें

🌐ब्राउज़र समर्थन:

एसवीजी सभी प्रमुख ब्राउज़रों द्वारा समर्थित है।

SVG क्या हैं?

Scalable Vector Graphics

एसवीजी का मतलब स्केलेबल वेक्टर ग्राफिक्स है

वेबसाइट पर

एसवीजी का उपयोग किसी वेबसाइट के लिए वेक्टर-आधारित ग्राफिक्स को परिभाषित करने के लिए किया जाता है

एक्सएमएल प्रारूप

एसवीजी एक्सएमएल प्रारूप में ग्राफिक्स को परिभाषित करता है

एनिमेशन

एसवीजी फाइलों में प्रत्येक तत्व और विशेषता को एनिमेटेड किया जा सकता है

W3C सिफारिश

SVG एक W3C अनुशंसा है

एकीकरण

एसवीजी सीएसएस, डीओएम, एक्सएसएल और जावास्क्रिप्ट जैसे अन्य मानकों के साथ एकीकृत होता है

<svg> तत्व

HTML <svg> तत्व SVG ग्राफ़िक्स के लिए एक कंटेनर है।

एसवीजी के पास पथ, आयत, वृत्त, बहुभुज, पाठ और बहुत कुछ बनाने के कई तरीके हैं।

🎨एसवीजी प्रारूपण विधियाँ:

  • <सर्कल> - वृत्त बनाएं
  • <rect> - आयत बनाएं
  • <लाइन> - रेखाएँ खींचें
  • <बहुभुज> - बहुभुज बनाएं
  • <पाठ> - पाठ बनाएं
  • <पथ> - जटिल पथ बनाने के लिए

एसवीजी सर्कल

उदाहरण

<!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>

गुण विवरण:

  • cx:वृत्त के केंद्र का x-निर्देशांक
  • cy:y-वृत्त के केंद्र का निर्देशांक
  • r:वृत्त की त्रिज्या
  • stroke:सीमा रंग
  • stroke-width:बाहरी सीमा की चौड़ाई
  • fill:रंग भरना

एसवीजी आयत

उदाहरण

<svg width="400" height="120">
  <rect x="10" y="10" width="200" height="100" stroke="red" stroke-width="6" fill="blue" />
</svg>

गुण विवरण:

  • x:ऊपरी बाएँ कोने का x-निर्देशांक
  • y:ऊपरी बाएँ कोने का y-निर्देशांक
  • width:आयत की चौड़ाई
  • height:आयत की ऊंचाई

रिज़ॉल्यूशन और गोल कोनों के साथ एसवीजी आयत

उदाहरण

<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>

नई सुविधाओं:

  • rx:x-अक्ष पर कोने की त्रिज्या वृत्त करें
  • ry:y-अक्ष पर कोने की त्रिज्या वृत्त करें
  • opacity:रिज़ॉल्यूशन (0.0 से 1.0)
  • style:सीएसएस शैलियों का उपयोग करना

एसवीजी स्टार

उदाहरण

<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>

<बहुभुज> तत्व:

points:तारे के प्रत्येक शीर्ष के x,y निर्देशांक की एक सूची। प्रत्येक निर्देशांक को अल्पविराम द्वारा अलग किया जाता है।

एसवीजी ग्रेडिएंट दीर्घवृत्त और पाठ

उदाहरण

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="red" />
    </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>
SVG Sorry, your browser does not support inline SVG.

महत्वपूर्ण टिप्पणियाँ:

  • <defs>:पुन: प्रयोज्य परिभाषाएँ शामिल हैं
  • <linearGradient>:एक रेखीय ढाल को परिभाषित करता है
  • fill="url(#grad1)":भरण रंग के रूप में ग्रेडिएंट का उपयोग करता है
  • <ellipse>:दीर्घवृत्त को परिभाषित करता है (cx, cy, rx, ry)

एसवीजी और कैनवास के बीच अंतर

एसवीजी एक्सएमएल में 2डी ग्राफिक्स का वर्णन करने के लिए एक भाषा है, कैनवास तुरंत 2डी ग्राफिक्स खींचता है (जावास्क्रिप्ट के साथ)।

एसवीजी के बारे में

  • एसवीजी एक्सएमएल-आधारित है, जिसका अर्थ है कि प्रत्येक तत्व एसवीजी डोम के भीतर उपलब्ध है
  • आप जावास्क्रिप्ट इवेंट हैंडलर को एसवीजी ग्राफिक्स से जोड़ सकते हैं
  • एसवीजी में, प्रत्येक खींची गई आकृति को एक वस्तु के रूप में संग्रहीत किया जाता है
  • यदि एसवीजी ऑब्जेक्ट की विशेषताएँ बदल दी जाती हैं, तो ब्राउज़र स्वचालित रूप से आकृति को फिर से प्रस्तुत करेगा
  • स्केलेबल - किसी भी गुणवत्ता को खोए बिना स्केल किया जा सकता है

कैनवास के बारे में

  • कैनवास पिक्सेल द्वारा प्रस्तुत पिक्सेल
  • कैनवास पर, ग्राफ़िक तैयार होने के बाद, ब्राउज़र इसे भूल जाता है
  • यदि इसकी स्थिति बदलनी हो तो पूरा दृश्य दोबारा बनाना होगा
  • ग्राफ़िक द्वारा कवर की गई कोई भी वस्तु दोबारा बनाई जानी चाहिए
  • पिक्सेल-आधारित - ज़ूम करने पर गुणवत्ता ख़राब हो जाती है

एसवीजी और कैनवास की तुलना

नीचे दी गई तालिका कैनवास और एसवीजी के बीच कुछ महत्वपूर्ण अंतर दिखाती है:

SVG कैनवास
संकल्प से स्वतंत्र संकल्प पर निर्भर करता है
इवेंट संचालकों के लिए समर्थन इवेंट संचालकों के लिए कोई समर्थन नहीं
अच्छी प्रस्तुति कौशल ख़राब टेक्स्टिंग कौशल
जटिल होने पर धीमी डिलीवरी खेल अनुप्रयोगों के लिए उपयुक्त
खेल अनुप्रयोगों के लिए उपयुक्त नहीं है आप परिणामी छवि को .png या .jpg के रूप में सहेज सकते हैं
DOM में हेरफेर ग्राफ़िक-सघन खेलों के लिए उपयुक्त

🤔कब उपयोग करें:

एसवीजी का प्रयोग करें:प्रतीक, चार्ट, ग्राफ़, लोगो, यूआई तत्व
कैनवास का प्रयोग करें:गेम्स, छवि संपादन, त्वरित ग्राफिक्स, पिक्सेल हेरफेर

इंटरएक्टिव एसवीजी डेमो

🎮एसवीजी तत्वों के साथ बातचीत करें

क्लिक करने योग्य तत्व

क्लिक करें और एसवीजी तत्व देखें

एसवीजी के लाभ:

स्केलेबल - किसी भी गुणवत्ता को खोए बिना स्केल किया जा सकता है
इवेंट हैंडलिंग - प्रत्येक तत्व क्लिक करने योग्य है
एक्सएमएल आधारित - एसईओ अनुकूल और उपयोग में आसान
सीएसएस के साथ स्टाइल करने योग्य - सीएसएस का उपयोग करके स्टाइल किया जा सकता है
एनीमेशन - एनीमेशन सीएसएस या जावास्क्रिप्ट के साथ किया जा सकता है

एसवीजी ट्यूटोरियल

एसवीजी के बारे में अधिक जानने के लिए, हमारे एसवीजी ट्यूटोरियल को पढ़ें।

बुनियादी एसवीजी आकार

  • वृत्त - वृत्त
  • आयत - आयत
  • दीर्घवृत्त - दीर्घवृत्त
  • रेखा - सीधी रेखाएँ
  • पॉलीलाइन - पॉलीलाइन्स
  • बहुभुज - बहुभुज

एसवीजी विशेषताएँ

  • भरना - रंग भरना
  • स्ट्रोक - रूपरेखा रंग
  • स्ट्रोक-चौड़ाई - स्ट्रोक चौड़ाई
  • अपारदर्शिता - स्पष्टता
  • परिवर्तन
  • शैली - सीएसएस शैलियाँ

📚एसवीजी शिक्षण संसाधन:

आपको एसवीजी ग्राफिक्स बनाने और हेरफेर करने के लिए जावास्क्रिप्ट और सीएसएस ज्ञान उपयोगी लगेगा। HTML DOM के समान SVG का अपना DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) है।