स्केलेबल वेक्टर ग्राफिक्स (SVG) में एक नज़र

वेक्टर ग्राफिक्स को प्रिंट मीडिया में व्यापक रूप से लागू किया गया है। एक वेबसाइट में, हम एसवीजी या के साथ वेक्टर ग्राफिक्स भी जोड़ सकते हैं स्केलेबल वेक्टर ग्राफिक. W3.org पर आधिकारिक युक्ति का हवाला देते हुए, SVG का वर्णन इस प्रकार है:

XML में द्वि-आयामी ग्राफिक्स का वर्णन करने के लिए एक भाषा। एसवीजी तीन प्रकार की ऑग्राफिक वस्तुओं के लिए अनुमति देता है: वेक्टर ग्राफिक आकार (जैसे, सीधी रेखाओं और वक्रों से युक्त पथ), चित्र और पाठ.

यह वास्तव में 1999 के बाद से है और 16 अगस्त 2011 तक यह W3C सिफारिश बन गया। फिर भी, SVG का अभी भी काफी उपयोग किया जा रहा है, जबकि बिटमैप के बजाय वेक्टर का उपयोग करने में बहुत सारे फायदे हैं, जो किसी वेबसाइट पर ग्राफिक या इमेज की सेवा करने के लिए है.

SVG के फायदे

वेबसाइटों पर ग्राफिक्स परोसने की अवधि में, एसवीजी बिटमैप पर कुछ लाभ प्रदान करता है, जिनमें से कुछ में शामिल हैं:

संकल्प स्वतंत्र

बिटमैप / रेखापुंज ग्राफ़िक रिज़ॉल्यूशन पर निर्भर है - यह पिक्सेल पर बनाया गया है। जब इसे एक निश्चित ज़ूम स्तर पर आकार दिया जाता है, तो इसमें परोसा गया ग्राफिक्स पिक्सेलित दिखाई देगा। यह वेक्टर ग्राफिक के लिए नहीं होता है, जो प्रकृति में स्वतंत्र रूप से रिज़ॉल्यूशन है, क्योंकि ग्राफिक गणितीय समीकरण के साथ व्यक्त किया जाता है जो इसे बनाता है गुणवत्ता बनाए रखते हुए किसी भी ज़ूम स्तर पर स्केलेबल, रेटिना डिस्प्ले पर भी.

HTTP रिक्वेस्ट को कम करना

SVG को सीधे HTML डॉक्युमेंट में एम्बेड किया जा सकता है svg टैग, इसलिए ब्राउज़र को ग्राफिक परोसने के लिए अनुरोध करने की आवश्यकता नहीं है। यह वेबसाइट के लिए बेहतर लोड प्रदर्शन का भी परिणाम है.

स्टाइलिंग और स्क्रिप्टिंग

साथ सीधे एंबेडेड svg टैग हमें सीएसएस के माध्यम से ग्राफिक को आसानी से स्टाइल करने की अनुमति देगा। हम कर सकते हैं ऑब्जेक्ट गुण बदलें जैसे बैकग्राउंड कलर, अपारदर्शिता, बॉर्डर आदि, वैसे ही हम रेगुलर HTML टैग के साथ करते हैं। इसी तरह, हम ग्राफिक को जावास्क्रिप्ट के माध्यम से भी जोड़ सकते हैं.

एनिमेटेड और संपादित किया जा सकता है

SVG ऑब्जेक्ट एनिमेटेड हो सकता है जब वह एनीमेशन तत्व का उपयोग करता है या जावास्क्रिप्ट लाइब्रेरी जैसे jQuery के माध्यम से। SVG ऑब्जेक्ट को किसी भी टेक्स्ट कोड एडिटर या Inkscape (जैसे कि फ्री) या एडोब इलस्ट्रेटर जैसे ग्राफिक सॉफ्टवेयर के साथ एडिट किया जा सकता है.

छोटे फ़ाइल का आकार

एसवीजी में बिटमैप की तुलना में एक छोटा फ़ाइल आकार है, जिसमें एक समान ग्राफिक प्रस्तुति है.

एसवीजी के साथ मूल आकृतियाँ खींचना

युक्ति के अनुसार, हम कुछ बुनियादी आकृतियों को आकर्षित कर सकते हैं जैसे आयत, वृत्त, रेखा, दीर्घवृत्त, पॉलीलाइन और बहुभुज SVG के साथ और SVG ग्राफ़िक रेंडर करने के लिए ब्राउज़र के लिए, उन सभी ग्राफिक तत्वों को अंदर डालना होगा टैग। आइए अधिक विवरण के लिए नीचे दिए गए उदाहरण देखें:

लाइन

आकर्षित करने के लिए एक लाइन एसवीजी में हम इसका उपयोग कर सकते हैं तत्व। इस तत्व का उपयोग एक सीधी रेखा खींचने के लिए किया जाता है, इसलिए इसमें केवल दो बिंदु होंगे, शुरु तथा समाप्त.

जैसा कि आप ऊपर देख सकते हैं, लाइन प्रारंभ बिंदु समन्वय पहले दो विशेषताओं के साथ व्यक्त किया गया है x1 तथा x2, जबकि लाइन का अंतिम बिंदु समन्वय के साथ व्यक्त किया जाता है y1 तथा y2.

दो अन्य विशेषताएँ भी हैं, आघात तथा रेखा की चौड़ाई जिसका उपयोग क्रमशः सीमा के रंग और सीमा की चौड़ाई को परिभाषित करने के लिए किया जाता है। वैकल्पिक रूप से, हम इन विशेषताओं को इनलाइन शैली में भी परिभाषित कर सकते हैं, जैसे:

यह अंततः बस वही करता है.

• डेमो देखें “लाइन”

पॉलीलाइन

यह लगभग समान है , लेकिन साथ तत्व हम केवल एक के बजाय कई रेखाएँ खींच सकते हैं। यहाँ एक उदाहरण है:

तत्व है अंक विशेषताएँ जो सभी निर्देशांक को संग्रहीत करती हैं जो लाइनों का निर्माण करती हैं.

• डेमो देखें “पॉलीलाइन”

आयत

इसके साथ एक आयत बनाना भी सरल है तत्व। हमें केवल चौड़ाई और ऊंचाई निर्दिष्ट करने की आवश्यकता है, जैसे:

• डेमो देखें “आयत”

वृत्त

हम इसके साथ एक सर्कल भी बना सकते हैं तत्व। निम्नलिखित उदाहरण में, हम एक सर्कल बनाएंगे 100 त्रिज्या जिसके साथ परिभाषित किया गया है आर विशेषता:

पहले दो गुण, cx तथा cy सर्कल के केंद्र समन्वय को परिभाषित कर रहे हैं। उपरोक्त उदाहरण में, हमने निर्धारित किया है 102 दोनों के लिए एक्स तथा y यदि ये विशेषताएँ निर्दिष्ट नहीं हैं, तो समन्वय करें, 0 डिफ़ॉल्ट मान के रूप में लिया जाएगा.

• डेमो देखें “वृत्त”

अंडाकार

हम एक दीर्घवृत्त खींच सकते हैं . यह सर्कल के समान काफी काम करता है, लेकिन इस बार हम विशेष रूप से नियंत्रण कर सकते हैं एक्स लाइन त्रिज्या और y रेखा त्रिज्या के साथ rx तथा ry विशेषता;

• डेमो देखें “अंडाकार”

बहुभुज

उसके साथ तत्व, हम एक त्रिभुज, षट्भुज और यहां तक ​​कि एक आयत जैसी कई आकृतियों को आकर्षित कर सकते हैं। यहाँ एक उदाहरण है:

• डेमो देखें “बहुभुज”

वेक्टर ग्राफिक एडिटर का उपयोग करना

जैसा कि आप देख सकते हैं, HTML में एसवीजी के साथ सरल वस्तुओं को आकर्षित करना काफी आसान है। हालांकि, जब ऑब्जेक्ट अधिक जटिल हो जाता है, तो यह अभ्यास अब आदर्श नहीं है और आपको सिरदर्द देगा.

सौभाग्य से, जैसा कि हमने ऊपर उल्लेख किया है, हम जैसे वेक्टर ग्राफिक संपादक का उपयोग कर सकते हैं एडोब इलस्ट्रेटर या इंकस्केप काम करने के लिए। यदि आप इन सॉफ़्टवेयरों से परिचित हैं, तो निश्चित रूप से ग्राफ़िक को HTML टैग में कोड करने के बजाय उनके GUI के साथ ऑब्जेक्ट्स को खींचना बहुत आसान है.

यदि आप Inkscape के साथ काम कर रहे हैं, आप अपने वेक्टर ग्राफिक को सादे SVG के रूप में सहेज सकते हैं, और फिर इसे टेक्स्ट कोड एडिटर में खोल सकते हैं। अब, आपको फ़ाइल में SVG कोड ढूंढना चाहिए। सभी कोड कॉपी करें और अपने HTML डॉक्यूमेंट के अंदर पेस्ट करें.

या, आप भी एम्बेड कर सकते हैं .svg इन तत्वों में से एक के माध्यम से फ़ाइल; एम्बेड, iframe तथा वस्तु, उदाहरण के लिए;

परिणाम अंततः वही होंगे.

इस उदाहरण में, मैं OpenClipArt.org से इस Apple iPod का उपयोग करता हूं.

• डेमो देखें “आइपॉड”

ब्राउज़र का समर्थन

ब्राउज़र समर्थन के बारे में, SVG को IE8 और इससे पहले के सभी प्रमुख ब्राउज़रों में बहुत अच्छी तरह से समर्थित किया गया है। लेकिन इस मामले को इस जावास्क्रिप्ट लाइब्रेरी के साथ हल किया जा सकता है, जिसे राफेल.जेएस कहा जाता है। चीजों को आसान बनाने के लिए हम अपने एसवीजी कोड को राफेल-समर्थित प्रारूप में बदलने के लिए इस टूल, रेडीसेटरपेल.कॉम का उपयोग करेंगे। ऐसे.

सबसे पहले, डाउनलोड करें और शामिल करें Raphael.js आपके HTML दस्तावेज़ को लाइब्रेरी। फिर, अपलोड करें .svg साइट पर फ़ाइल करें, निम्न लोड के अंदर उत्पन्न कोड को कॉपी और पेस्ट करें समारोह;

 window.onload = function () // राफेल कोड यहाँ जाता है 

के अंदर तन टैग, निम्नलिखित डाल दिया div साथ में RSR आईडी विशेषता;

बस, हो गया। नीचे दिए गए लिंक से उदाहरण देखें.

• डेमो देखें “राफेल”

अंतिम विचार

तो यह एसवीजी के साथ मूल बातें है। हमें उम्मीद है कि अब आपको इस विषय के बारे में अच्छी समझ हो जाएगी। यह किसी भी स्क्रीन रिज़ॉल्यूशन के लिए अपनी साइट को ऑप्टिमाइज़ करने का सबसे अच्छा तरीका है, यहां तक ​​कि रेटिना डिस्प्ले पर उपयोग के लिए भी.

हमेशा की तरह, यदि आप एक साहसी व्यक्ति हैं, तो यहां हमने इस विषय में गहराई से खुदाई करने के लिए कुछ और संदर्भ और चर्चा रखी है.

• एसवीजी का एक परिचय - डब्ल्यू 3 स्कूल
• संकल्प एसवीजी के साथ स्वतंत्र - मुंहतोड़ पत्रिका
• आप एसवीजी का उपयोग क्यों नहीं कर रहे हैं? - नेटट्स

पढ़ने के लिए धन्यवाद और हमें उम्मीद है कि आपको यह पोस्ट अच्छी लगी होगी.

• डेमो देखें
• स्रोत डाउनलोड करें