एसवीजी ग्राफिक्स का परिचय

यह पोस्ट एसवीजी (स्केलेबल वेक्टर ग्राफिक) पर लेखों की एक श्रृंखला की पहली है जो किसी साइट पर वेक्टर ग्राफिक्स की मूल बातें बताती है।



वेक्टर ग्राफिक्स का व्यापक रूप से मुद्रण में उपयोग किया जाता है। वेबसाइटों के लिए, एसवीजी है, जो w3.org पर आधिकारिक विनिर्देश के अनुसार, XML में दो-आयामी ग्राफिक्स का वर्णन करने के लिए एक भाषा है। एसवीजी में तीन प्रकार की वस्तुएं शामिल हैं: आकार, चित्र और पाठ। एसवीजी 1999 से अस्तित्व में है , और 16 अगस्त, 2011 से डब्ल्यू 3 सी सिफारिशों में शामिल है। एसवीजी को वेब डेवलपर्स द्वारा बहुत कम करके आंका जाता है, हालांकि इसके कई महत्वपूर्ण फायदे हैं।

सभी उदाहरणों का प्रदर्शन / स्रोत डाउनलोड करें / आधिकारिक दस्तावेज

एसवीजी के लाभ

• स्केलिंग: रेखापुंज ग्राफिक्स के विपरीत, एसवीजी स्केलिंग करते समय गुणवत्ता नहीं खोता है, इसलिए रेटिना के तहत विकास के लिए इसका उपयोग करना सुविधाजनक है।
• HTTP अनुरोधों को कम करना: एसवीजी का उपयोग करते समय, सर्वर को कॉल की संख्या कम हो जाती है, और साइट लोड करने की गति में तेजी से वृद्धि होती है।
• स्टाइलिंग और स्क्रिप्टिंग: सीएसएस का उपयोग करके आप पृष्ठभूमि, पारदर्शिता या सीमाओं जैसे साइट पर ग्राफिक्स सेटिंग्स को बदल सकते हैं।
• एनीमेशन और संपादन: जावास्क्रिप्ट का उपयोग करके, आप एसवीजी को चेतन कर सकते हैं, और एक पाठ या ग्राफिक्स संपादक ( इंकस्केप या एडोब इलस्ट्रेटर ) में भी संपादित कर सकते हैं।
• छोटे आकार: एसवीजी ऑब्जेक्ट्स का वजन बिटमैप्स से बहुत कम होता है।

बेसिक एसवीजी आकार

आधिकारिक विनिर्देश के अनुसार , आप SVG का उपयोग करके सरल वस्तुओं को आकर्षित कर सकते हैं: एक आयत, वृत्त, रेखा, दीर्घवृत्त, पॉलीलाइन, या बहुभुज svg टैग का उपयोग करके।

केवल दो मापदंडों के साथ लाइन टैग का उपयोग कर एक सरल रेखा - प्रारंभ बिंदु (X1 और x2) और अंतिम बिंदु (y1 और y2):

<svg> <line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/> </svg> 

आप रंग और चौड़ाई सेट करने के लिए स्ट्रोक या स्ट्रोक-चौड़ाई विशेषताओं या शैलियों को भी जोड़ सकते हैं:

 style="stroke-width:1; stroke:rgb(0,0,0);" 

डेमो

टूटी हुई रेखा

वाक्यविन्यास पिछले एक के समान है, पॉलीलाइन टैग का उपयोग किया जाता है, अंक विशेषता को निर्दिष्ट करता है:

 <svg> <polyline points="0,0 50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg> 

डेमो

आयत

रेक्ट टैग द्वारा कॉल की गई, आप कुछ विशेषताएँ जोड़ सकते हैं:

 <svg> <rect width="200" height="200" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg> 

डेमो

वृत्त

सर्कल टैग द्वारा बुलाया जाता है, उदाहरण में, r विशेषता का उपयोग करके, त्रिज्या, cx और साइबर सेट को केंद्र निर्देशांक:

 <svg> <circle cx="102" cy="102" r="100" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg> 

डेमो

अंडाकार

दीर्घवृत्त टैग द्वारा कहा जाता है, यह सर्कल के समान काम करता है, लेकिन आप दो रेडी - आरएक्स और आरवाई सेट कर सकते हैं:

 <svg> <ellipse cx="100" cy="50" rx="100" ry="50" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg> 

डेमो

बहुभुज

बहुभुज टैग द्वारा कॉल किए जाने पर, बहुभुज की एक अलग संख्या हो सकती है:

 <svg> <polygon points="70.444,218.89 15.444,118.89 70.444,18.89 180.444,18.89 235.444,118.89 180.444,218.89" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg> 

डेमो

संपादकों का उपयोग करना

जैसा कि आप उदाहरणों से देख सकते हैं, मूल एसवीजी आकृतियों को आरेखण करना बहुत सरल है, लेकिन ऑब्जेक्ट अधिक जटिल हो सकते हैं। इनके लिए, आपको वेक्टर ग्राफिक्स संपादकों का उपयोग करने की आवश्यकता है, जैसे कि एडोब इलस्ट्रेटर या इंकस्केप, जहां आप एसवीजी प्रारूप में फ़ाइलों को सहेज सकते हैं, और फिर एक पाठ संपादक में संपादित कर सकते हैं। आप SVG पेज को एम्बेड, iframe और ऑब्जेक्ट के साथ एम्बेड कर सकते हैं:

 <object data="images/ipod.svg" type="image/svg+xml"></object> 

एक उदाहरण OpenClipArt.org से एक iPod की एक छवि है:

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

एसवीजी इंटरनेट एक्सप्लोरर 8 और नीचे को छोड़कर लगभग सभी आधुनिक ब्राउज़रों द्वारा समर्थित है । लेकिन यह राफेल.जेएस जावास्क्रिप्ट लाइब्रेरी का उपयोग करके भी तय किया जा सकता है। आप इस लाइब्रेरी के प्रारूप पर SVS फाइल को ReadySetRaphael.com पर बदल सकते हैं।



सबसे पहले आपको राफेल.जेएस लाइब्रेरी को वांछित पेज से कनेक्ट करना होगा , फिर एसवीजी फ़ाइल लोड करें, फ़ंक्शन में उत्पन्न कोड को कॉपी और पेस्ट करें:

 window.onload=function() { //   Raphael } 

पृष्ठ पर, rsr विशेषता के साथ एक div डालें:

 <div id="rsr"></div> 

डेमो

निष्कर्ष

एसवीजी की सभी मूल बातें हैं, निम्नलिखित लेखों में वेक्टर ग्राफिक्स का उपयोग करने के अधिक जटिल उदाहरणों पर चर्चा की जाएगी।

उपयोगी पढ़ने का एक सा:

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