SVG | स्केलेबल वेक्टर ग्राफिक्स | HTML in Hindi


इस से पहले tutorial में  HTML canvas के बारे में सीखा था । इस tutorial में हम HTML5 SVG को सीखेंगे । SVG की फुल फॉर्म हैं स्केलेबल वेक्टर ग्राफिक्स (Scalable Vector Graphics)  होती हैं । HTML के पुराने version में  SVG नहीं था क्युकी ये ग्राफ़िक के पार्ट हैं जो की HTML5 में लाये गए ।

SVG का उपयोग ग्राफ़िक्स ड्रा(draw) करने के लिए किया जाता हैं । SVG की मदद से web पेज पर विभिन्न प्रकार के ग्राफिक्स बना सकते हैं।

 

HTML SVG के द्वारा boxes, circles, rectangle, text, and graphic images को draw किया जा सकता हैं ।  Graphics के लिए HTML5 में बहुत महत्तपूर्ण एलिमेंट को लाया गया जिस से ग्राफ़िक को draw किया जाने लगा और gaming की दुनिया में भी इसका बहुत ज्यादा फायदा हुआ हैं ।
चलिए HTML SVG की मदत से एक rectangle में color को भरते हैं ।

HTML SVG


<!DOCTYPE html>
<html>
<head>
<title>HTML SVG </title>
</head>
<body>

  

</body>
</html>
Run

ऊपर दिए गए उदाहरण में HTML SVG के साथ कुछ ऐट्रिब्यूट्स का भी उपयोग किया गया हैं जो निम्नलिखित हैं ।


1.  SVG टैग की ऊंचाई (height) 200 और चौड़ाई(width) 500 डिफाइन किया गया हैं ।

2. SVG ग्राफिक पर आयत(rectangle) बनाने के लिए उपयोग किया जाता है।

3. आयत (rectangle) की ऊंचाई 200 और चौड़ाई 500 डिफाइन की गयी हैं ।

4.  Color और दिए गए स्ट्रोक (सीमा) की वैल्यू और कलर रेड डिफाइन किया हुआ हैं ।
इस तरह से SVG का उपयोग करके एक rectangle में कलर को भरा जा सकता हैं।
यह HTML SVG का base होता हैं । यदि कोड को execute करते टाइम कुछ भी नहीं दिखाई देता या कुछ प्रॉब्लम आती हैं तो इसका मतलब होता हैं की आपका ब्राउज़र HTML SVG ग्राफ़िक्स को सपोर्ट नहीं करता हैं ।


एसवीजी सर्कल( SVG circle) -


SVG के द्वारा ग्राफ़िक बनाना बहुत ही आसान रहता हैं । HTML SVG के द्वारा circle को भी बनाया जा सकता हैं । Circle बनाने के लिए SVG ब्लॉक में सर्किल को डिफाइन करना पड़ता हैं ।
इसमें कुछ co-ordinate भी होते हैं जो आप इस example से आसानी से समझा पाएंगे ।

HTML SVG


<!DOCTYPE html>
<html>
<head>
<title>HTML SVG </title>
</head>
<body>

  

</body>
</html>
Run

 

एसवीजी स्टार (बहुभुज) - SVG Start Polygon


वेब पेज पर स्टार draw करने के लिए भी SVG का उपयोग कर सकते हैं । ऐसा नहीं हैं की आप सिर्फ Star ही draw कर सकते हैं । SVG के द्वारा आप कुछ भी ग्राफ़िक draw कर सकते हैं ।

हम बहुभुज(polygon) निर्देशांक x और y का उपयोग करके तारा (star) बना सकते हैं। स्टार का निम्नलिखित उदाहरण आपको दिखाएगा कि स्टार को कैसे draw किया जाता हैं ।

HTML SVG


<!DOCTYPE html>
<html>
<head>
<title>HTML SVG </title>
</head>
<body>


  


</body>
</html>
Run


ऊपर दिए गए example में -
1. SVG की height और width को डिफाइन किया गया हैं । 


2. SVG ब्लॉक में polygon पॉइंट को भी डिफाइन किया हुआ हैं जिस से SVG उन पॉइंट्स पर drawing कर सके।

3. Polygon में हमने ग्रीन color को fill किया हुआ हैं ।


4. स्ट्रोक से मतलब यहाँ पर polygon के बॉर्डर से होता हैं ।

इस तरह से SVG की मदत से कोई भी graphic को किसी भी angel में draw किया जा सकता हैं ।


Please Share

Recommended Posts:-