SVGs: HTML5 ग्राफिक्स बनाएं जो किसी भी ब्राउजर में काम करें

प्रकटीकरण: आपका समर्थन साइट को चालू रखने में मदद करता है! हम इस पृष्ठ पर हमारे द्वारा सुझाई गई कुछ सेवाओं के लिए एक रेफरल शुल्क कमाते हैं.


वेब पर छवियों के साथ काम करते समय, अपने इच्छित उद्देश्य के लिए सही प्रकार की फ़ाइल का उपयोग करना महत्वपूर्ण है। जबकि JPG, PNG और GIF जैसे प्रारूप वेब उपयोगकर्ताओं के लिए सबसे अधिक परिचित हैं, वे हमेशा उपयुक्त विकल्प नहीं हो सकते हैं.

यह आलेख आपको एक अन्य प्रकार के छवि प्रारूप की मूल बातों से परिचित कराएगा: एसवीजी, या स्केलेबल वेक्टर ग्राफिक्स प्रारूप.

एसवीजी: स्केलेबल वेक्टर ग्राफिक्स

Contents

वेक्टर बनाम रेखापुंज छवि प्रारूप

छवि फ़ाइलों की दुनिया में, दो मूल प्रकार के प्रारूप हैं: रेखापुंज और वेक्टर। रेखापुंज आधारित प्रारूप पिक्सेल पर आधारित होते हैं। इन स्वरूपों में JPG, PNG और GIF जैसे फ़ाइल प्रकार शामिल हैं.

कभी-कभी, रेखापुंज छवियों को बिटमैप छवियों के रूप में संदर्भित किया जाता है, उनके पिक्सेल-आधारित प्रकृति के कारण। पिक्सेल, ज़ाहिर है, आपके द्वारा वेब पर देखी जाने वाली अधिकांश डिजिटल छवियों के छोटे वर्ग निर्माण ब्लॉक हैं.

आप यह बता सकते हैं कि क्या एक छवि एक रेखापुंज आधारित (या बिटमैप) छवि है, इसे करीब से और (आमतौर पर) आवर्धित ज़ूम में देखकर। यदि आप उच्च रिज़ॉल्यूशन के लाखों छोटे वर्ग देखते हैं (विशेषकर उन स्थानों पर जहाँ एक रंग दूसरे में बदल जाता है), तो आप पिक्सेल देख रहे हैं, और इस प्रकार यह एक रेखापुंज छवि है.

दूसरी ओर, वेक्टर आधारित ग्राफिक्स, पाठ-आधारित XML में संग्रहीत लाइनों और वक्रों पर आधारित होते हैं। वे गणितीय सिद्धांत पर बहुत अधिक आधारित हैं, और परिणामस्वरूप उन्हें बनाने, खोलने और संपादित करने के लिए विशेष कंप्यूटर प्रोग्राम की आवश्यकता होती है.

क्योंकि वेक्टर आधारित चित्र चित्र हैं, वे तस्वीरों के लिए उपयुक्त नहीं हैं। हालाँकि, एक चित्र जो चित्र के आधार पर कलाकार द्वारा बनाया गया है, उसे SVG में बनाया जा सकता है। लोगो शायद वेब पर एसवीजी का प्राथमिक उपयोग है, अन्य ब्रांड-विशिष्ट चित्रण के साथ.

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

वेक्टर और रेखापुंज स्वरूपों के बीच अंतर के कारण; एक एसवीजी प्रारूप यहां जाने का तरीका है.

एसवीजी के लाभ

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

इसलिए जब आप एक रेखापुंज ग्राफ़िक पर ज़ूम करते हैं – एक JPG या PNG फ़ाइल, उदाहरण के लिए – आप छवि को तेजी से धुंधला और विकृत देखेंगे.

एसवीजी प्रारूप में, आपने नहीं जीता। आप छवि के विरूपण के बिना आवर्धन और ज़ूम कर सकते हैं.

यह एसवीजी प्रारूप की प्रकृति के कारण संभव हुआ है। क्योंकि यह टेक्स्ट-आधारित है और पिक्सेल-आधारित नहीं है, इसलिए आप अखंडता की हानि या विस्तार की खराबी के बिना छवि का आकार बदल सकते हैं.

यह सुविधा अकेले एसवीजी अविश्वसनीय रूप से उपयोगी फाइलों को बनाती है, विशेष रूप से ब्रांड पर निर्भर छवियों जैसे कि जटिल लोगो और अन्य वेबसाइट ग्राफिक्स के लिए। SVG को भविष्य की परियोजनाओं के लिए स्वतंत्र रूप से आकार दिया जा सकता है, जिससे SVG को वेबसाइट के काम के लिए एक अधिक लचीला प्रारूप बना दिया जाएगा.

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

एसवीजी छवि के हर तत्व और पहलू के लिए एनीमेशन का समर्थन करता है। क्योंकि वे पाठ-आधारित हैं, इसलिए वे खोजे जाने योग्य और अनुक्रमित होने के साथ-साथ संकुचित भी हैं.

एसवीजी के नुकसान

एसवीजी प्रारूप में छवि फ़ाइलों का उपयोग करने का एक प्राथमिक नुकसान है, और वह संगतता है। आपको ऐसे सॉफ़्टवेयर की आवश्यकता होती है जो SVGs के साथ काम करने में सक्षम हों.

उन कार्यक्रमों में से कुछ, जैसे कि एडोब इलस्ट्रेटर, उन सभी के लिए तुरंत सुलभ नहीं हैं जिन्हें रास्टर आधारित छवियों के साथ काम करने के लिए संपादकों के ढेरों (उनमें से कई मुफ्त) के विपरीत काम करने की आवश्यकता हो सकती है।.

हालाँकि, Inkscape एक स्वतंत्र, ओपन-सोर्स संपादक है जो SVG फ़ाइलों को संभाल सकता है.

अन्य वेक्टर प्रारूप एक्सटेंशन

एसवीजी (स्केलेबल वेक्टर ग्राफिक) के अलावा, बुनियादी वेक्टर फ़ाइल एक्सटेंशन में शामिल हैं:

  • .drw (वेक्टर फ़ाइल)
  • .eps (एनकैप्सुलेटेड पोस्टस्क्रिप्ट)
  • .pct (Macintosh बिटमैप ग्राफिक्स प्रारूप)
  • .pif (वेक्टर छवि GDF प्रारूप)
  • .पीएस (एडोब पोस्टस्क्रिप्ट)
  • .svf (सरल वेक्टर प्रारूप)

HTML5 में SVG एलिमेंट्स

HTML तत्वों का उपयोग करके, आप ब्राउज़र में SVG के साथ कुछ बुनियादी आकृतियाँ बना सकते हैं। इन तत्वों में से प्रत्येक को टैग के भीतर नेस्टेड करने की आवश्यकता है.

लाइन

तत्व का उपयोग एक सीधी रेखा बनाने के लिए किया जा सकता है, जिसमें दो बिंदु होते हैं – एक शुरुआत और एक अंत। प्रत्येक बिंदु, निश्चित रूप से, दो निर्देशांक होंगे, एक “x” और एक “y।”

कोड इस तरह दिखेगा:

तुम भी अन्य विशेषताओं के साथ जोड़ी कर सकते हैं < लाइन > तत्व: स्ट्रोक रंग को परिभाषित करता है और स्ट्रोक-चौड़ाई लाइन की मोटाई को नियंत्रित करती है.

रेक्ट

तत्व का उपयोग करके एक आयत बनाएं और चौड़ाई और ऊंचाई विशेषताओं के साथ आयाम निर्दिष्ट करें। नीचे दिए गए कोड अंश में दिखाए अनुसार आप भरण के साथ रंग भी प्रदान कर सकते हैं और स्ट्रोक के साथ आयत की रूपरेखा के लिए:

वृत्त

जैसा कि आप उम्मीद करते हैं, तत्व एक सर्कल बनाता है। 40 के त्रिज्या (आर विशेषता के साथ सेट) के साथ एक सर्कल बनाने के लिए, ऊपर बाएं कोने से 40 पिक्सेल नीचे और 40 भर में केंद्रित है, एक हरा भरण और एक काली रूपरेखा, नीचे दिए गए कोड का उपयोग करें:

यदि आप cx और साइबर विशेषताओं को निर्दिष्ट नहीं करते हैं, तो ब्राउज़र “0.” के डिफ़ॉल्ट मान की व्याख्या करेगा।

अन्य तत्व जिन्हें आप शामिल कर सकते हैं, और, और .

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

एसवीजी को IE8 और पुराने संस्करणों को छोड़कर सभी प्रमुख उपलब्ध ब्राउज़रों में अच्छी तरह से समर्थित है.

एसडब्ल्यूएफ के बारे में क्या?

अनुभवी डिज़ाइनर और डेवलपर SWF को अच्छी तरह से जानते हैं – फ्लैश एनिमेशन और ग्राफिक्स का प्रारूप – और जबकि SVG काफी समय से आसपास रहा है, यह पिछले कुछ वर्षों में ही इसके लिए समर्थन मुख्यधारा में आया है.

एचटीएमएल 5, सीएसएस, जावास्क्रिप्ट और एसवीजी के पक्ष में फ्लैश घटने के समर्थन के साथ, यह महत्वपूर्ण है कि वेब पेशेवर एसवीजी और एसडब्ल्यूएफ के बीच अंतर को समझते हैं और आधुनिक तकनीकों का उपयोग करना सीखते हैं.

SWF क्या है?

एसडब्ल्यूएफ एक संक्षिप्त नाम है जो छोटे वेब प्रारूप के लिए है। यह एक Adobe Flash फ़ाइल प्रारूप है जिसका उपयोग ग्राफिक्स, एनिमेशन और एम्बेडेड एप्लेट विजेट के लिए किया जा सकता है। रेंडर करने के लिए SWF कंटेंट के लिए फ्लैश प्लग इन को ब्राउज़र में इंस्टॉल किया जाना चाहिए.

एसडब्ल्यूएफ लंबे समय से आसपास है, योग्य डेवलपर्स के एक बड़े पूल द्वारा समर्थित है, और कई पूर्व निर्मित एसडब्ल्यूएफ एनिमेशन और ट्यूटोरियल आसानी से उपलब्ध हैं.

एसवीजी और एसडब्ल्यूएफ के बीच समानताएं और अंतर

एसडब्ल्यूएफ और एसवीजी दोनों वेक्टर ग्राफिक फ़ाइल प्रारूप हैं, और वे दोनों एनिमेशन और अन्तरक्रियाशीलता बनाने के लिए स्क्रिप्ट किए जा सकते हैं। इस तरह वे समान हैं। हालांकि, ऐसे कई तरीके हैं जिनमें SWF और SVG अलग-अलग हैं.

एसवीजी एक ओपन स्टैंडर्ड है

एसवीजी मानक को वर्ल्ड वाइड वेब कंसोर्टियम (डब्ल्यू 3 सी) द्वारा विकसित किया गया था और, परिणामस्वरूप और उपयोग करने और निर्माण करने के लिए पूरी तरह से खुला और स्वतंत्र है। दूसरी ओर, SWF, Adobe के स्वामित्व वाला एक स्वामित्व वाला फ़्लैश प्रारूप है। 2008 में, Adobe ने SWF के उपयोग को नियंत्रित करने वाले कई प्रतिबंध हटा दिए, लेकिन SWF एक मालिकाना प्रारूप है.

एसवीजी के साथ काम करना आसान है

एसवीजी कोड मानव-पठनीय सादा पाठ XML है। SVG को किसी भी सादे टेक्स्ट एडिटर का उपयोग करके बनाया जा सकता है और सरल SVG बनाना आसान है और इसे HTML, CSS और JavaScript जैसी वेब भाषाओं से परिचित किसी भी व्यक्ति द्वारा जल्दी से सीखा जा सकता है। SWF को जटिल कार्यक्रमों जैसे Adobe आफ्टर इफेक्ट्स या ओपन-सोर्स ऑप्शंस जैसे मोशन-ट्विन एक्शनस्क्रिप्ट 2 संघटक के साथ बनाया और संपादित किया जाना चाहिए.

इसके अलावा, एनीमेशन और अन्तरक्रियाशीलता के लिए एसवीजी की स्क्रिप्टिंग सीएसएस और जावास्क्रिप्ट के साथ की जा सकती है – हर वेब डिजाइनर और डेवलपर भाषाओं के साथ दैनिक आधार पर काम करते हैं। दूसरी ओर, SWF को Adobe के ActionScript के साथ स्क्रिप्ट किया जाता है जो जावास्क्रिप्ट के समान है लेकिन समान नहीं है, और अधिकांश डेवलपर्स इससे बहुत कम लगातार आधार पर निपटते हैं.

एक वेबसाइट पर एसवीजी जोड़ना अन्य HTML तत्वों के अनुरूप एक HTML दस्तावेज़ में कोड छोड़ने के रूप में भी सरल है। वैकल्पिक रूप से, SVG को HTML डॉक्यूमेंट में एम्बेड किया जा सकता है। SWF को HTML डॉक्यूमेंट में एम्बेड किया जाना चाहिए.

एसवीजी एसईओ के लिए बेहतर है

चूंकि एसवीजी सादे-पाठ में लिखे गए हैं और उन्हें खोज इंजन द्वारा पढ़ा और अनुक्रमित किया जा सकता है। दूसरी ओर, SWF, बाइनरी फाइलें हैं जो खोज इंजनों की व्याख्या के लिए कठिन हैं। परिणामस्वरूप, यदि आप सामग्री वितरित करने के लिए एक एसवीजी या एसडब्ल्यूएफ का उपयोग कर रहे हैं, तो यदि आपने अपनी वेबसाइट पर खोज इंजन यातायात महत्वपूर्ण है तो एसवीजी का उपयोग करने के लिए बेहतर सेवा दी है।.

एसवीजी सपोर्ट बढ़ रहा है

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

एसवीजी और एसडब्ल्यूएफ दोनों कई मीडिया प्रकारों का समर्थन करते हैं

ध्वनि और वीडियो सामग्री को सीधे SWF फ़ाइल में एम्बेड किया जा सकता है। एसवीजी में ध्वनि और वीडियो सामग्री के लिए समर्थन शामिल नहीं है। हालाँकि, अन्य HTML5 सुविधाएँ ऑडियो और वीडियो सामग्री का समर्थन करती हैं, और इन सुविधाओं को सीधे SVG में एम्बेड किया जा सकता है। नतीजतन, ऑडियो और वीडियो को एसवीजी में एम्बेड किया जा सकता है, लेकिन प्लेबैक अन्य खिलाड़ियों द्वारा संभाला जाता है, एसवीजी मानक द्वारा स्वयं नहीं.

SWF सारांश

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

एसवीजी संसाधन

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

मूल बातें जानें

यदि आप एसवीजी के साथ शुरुआत कर रहे हैं, तो सरल आकार बनाने और भरने और ग्रेडिएंट का उपयोग करने के लिए क्रिएटिव ब्लोक के इस ट्यूटोरियल को देखें। एक दूसरा विकल्प जो बहुत सारी बुनियादी तकनीकों को शामिल करता है, वह है इस गाइड को एनवाटो टट्स से एसवीजी के साथ शुरू करना+.

SVG बनाने के लिए ग्राफिक्स सॉफ्टवेयर का उपयोग करें

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

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

उन्नत SVG तकनीक सीखें

यदि आप वास्तव में SVG में महारत हासिल करना चाहते हैं, तो दो संसाधन हैं जिनकी आपको समीक्षा करने के लिए कुछ समय बिताने की आवश्यकता है:

  • मोज़िला डेवलपर नेटवर्क से एसवीजी ट्यूटोरियल.
  • आज के ब्राउज़रों के लिए एक एसवीजी प्राइमर, W3C से एक मुफ़्त ई-पुस्तक.

ये दोनों संसाधन व्यापक हैं और एसवीजी प्रोग्रामिंग के संबंध में वर्तमान सोच और अभ्यास की पूरी चौड़ाई को कवर करते हैं। ये संसाधन शुरुआती लोगों के लिए नहीं हैं, लेकिन अगर आप HTML और CSS के साथ सहज हैं, और SVG के साथ काम करने में कुशल बनना चाहते हैं, तो आप इन्हें लेने के लिए तैयार हैं.

SVG एनिमेशन बनाएं

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

  • सीएसएस और जावास्क्रिप्ट का उपयोग करके एसवीजी एनिमेशन बनाने के लिए डेविड वॉल्श का एक ट्यूटोरियल.
  • जेनकोव का एक व्यापक ट्यूटोरियल एसवीजी के साथ काम करने के सभी पहलुओं को कवर करता है, जिसमें सीएसएस एनिमेशन और जावास्क्रिप्ट स्क्रिप्टिंग शामिल हैं.
  • एसवीजी एनिमेशन बनाने के लिए हांगकांग के आठ प्रमुख जावास्क्रिप्ट पुस्तकालयों की सूची.

आगे के संसाधन

  • मोज़िला डेवलपर्स नेटवर्क एसवीजी ट्यूटोरियल: एक इन-प्रोग्रेस ट्यूटोरियल, जो मोज़िला ब्राउज़र में उपयोग के लिए एसवीजी प्रारूप के हर पहलू पर चर्चा करता है.
  • सिंपल इंट्रो टू एसवीजी एनिमेशन: डेविड वाल्श द्वारा लिखित एक महान ट्यूटोरियल.
  • ImageMagick परिचय और संसाधन: ग्राफिक्स टूल्स का एक संग्रह, जिसमें पोस्टस्क्रिप्ट के लिए कुछ शामिल हैं.

निष्कर्ष

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me