😢 ⛲️ 💉 एसवीजी या कैनवास? 🕺🏻 🤴🏽 ↔️

एसवीजी और कैनवास ऐसी तकनीकें हैं जिनका उपयोग आप वेब पेजों पर कुछ आकर्षित करने के लिए कर सकते हैं। इसलिए, उन्हें एसवीजी का उपयोग करने के लिए कब, और कब कैनवास का उपयोग करना चाहिए, इसकी तुलना की जानी चाहिए। यहां तक कि इन प्रौद्योगिकियों के सार की एक बहुत ही सतही समझ आपको एक बहुत ही सूचित विकल्प बनाने की अनुमति देती है। तथ्य की बात के रूप में, यहां दो विशिष्ट परिस्थितियां हैं, जिनमें से एक में आपको एसवीजी पसंद करना चाहिए, और दूसरे में - कैनवास:

एक छोटा आइकन बनाने की आवश्यकता है? यह निश्चित रूप से एसवीजी का क्षेत्र है।
एक इंटरैक्टिव ब्राउज़र गेम बनाने की आवश्यकता है? यहाँ, निश्चित रूप से, हमें कैनवास प्रौद्योगिकी की आवश्यकता है।

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

एसवीजी - वेक्टर ग्राफिक्स घोषित रूप से वर्णित हैं

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

परिणाम यह है कि SVG का उपयोग अक्सर लोगो को आकर्षित करने के लिए किया जाता है। ऐसी छवियों का वर्णन करने वाला कोड सीधे HTML में एम्बेड किया जा सकता है। यह घोषणात्मक निर्देशों के एक सेट की तरह दिखता है:

<svg viewBox="0 0 100 100">   <circle cx="50" cy="50" r="50" /> </svg>

यदि आपको लचीली और संवेदनशील होने के लिए छवियों की आवश्यकता है, तो एसवीजी आपकी पसंद है।

कैनवास - ड्राइंग के लिए जावास्क्रिप्ट एपीआई

पृष्ठ के HTML कोड में कैनवास चित्र बनाने के लिए, <canvas> , जिसके बाद, जावास्क्रिप्ट का उपयोग करते हुए, वे इस तत्व पर "आकर्षित" करते हैं। दूसरे शब्दों में, प्रोग्रामर ब्राउज़र को इस बारे में निर्देश देता है कि उसे कुछ आकर्षित करने की आवश्यकता है (यह दृष्टिकोण घोषित की तुलना में आवश्यक है)। यहाँ यह कैसा दिखता है:

 <canvas id="myCanvas" width="578" height="200"></canvas> <script>  var canvas = document.getElementById('myCanvas');  var context = canvas.getContext('2d');  var centerX = canvas.width / 2;  var centerY = canvas.height / 2;  var radius = 70;  context.beginPath();  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);  context.fillStyle = 'green';  context.fill(); </script>

एसवीजी छवियों को डोम में संग्रहीत किया जाता है

यदि आप DOM ईवेंट्स, जैसे click और mouseDown से परिचित हैं, तो अवगत mouseDown कि SVG के साथ काम करते समय इन इवेंट्स का भी उपयोग किया जा सकता है। इस संबंध में, एसवीजी <circle> तत्व HTML <div> तत्व से बहुत अलग नहीं है।

 <svg viewBox="0 0 100 100">   <circle cx="50" cy="50" r="50" />   <script>    document.querySelector('circle').addEventListener('click', e => {      e.target.style.fill = "red";    });  </script> </svg>

एसवीजी पृष्ठ सामग्री को सुलभ बनाने के लिए बेहतर है

कैनवास तत्व को इसका पाठ विकल्प सौंपा जा सकता है:

 <canvas aria-label="Hello ARIA World" role="img"></canvas>

वही एसवीजी तत्व के लिए किया जा सकता है। लेकिन, चूंकि एसवीजी छवियों और उनके आंतरिक तंत्र को सीधे डोम में संग्रहीत किया जाता है, एसवीजी को आमतौर पर उन मामलों में उपयोग की जाने वाली तकनीक के रूप में माना जाता है जहां वे ऐसी परियोजनाएं बनाते हैं जो विकलांग लोगों के लिए सुलभ हैं।

दूसरे शब्दों में, आप एक एसवीजी छवि बना सकते हैं, जिसमें सहायक प्रौद्योगिकियां अपने उपयोगकर्ताओं को वेब पेज नेविगेट करने में मदद करने के लिए काम कर सकती हैं।

पाठ डेटा जो छवियों का हिस्सा है, यह भी मामला है जब SVG का उपयोग करना बेहतर होता है। एसवीजी में एक विशेष तत्व भी है - <text> । यह आपको ग्रंथों के स्पष्ट पात्रों को प्रदर्शित करने की अनुमति देता है, यह सहायक तकनीक द्वारा माना जाता है। यदि आप ग्रंथों को देखने के लिए कैनवास तत्व का उपयोग करते हैं, तो ऐसे ग्रंथ अक्सर खराब प्रदर्शित होते हैं और धुंधले दिखाई देते हैं।

कैनवस व्यक्तिगत पिक्सेल छवियों के साथ काम करने के लिए बेहतर है

नीचे हम विभिन्न विशेषज्ञों द्वारा एसवीजी और कैनवास की तुलना के आधार पर संकलित कई सारणियाँ देते हैं। इस तरह की एक तुलना में, सारा ड्रैसनर द्वारा प्रस्तुत, यह कहा जाता है कि कैनवास का उपयोग करके आप पिक्सेल नृत्य कर सकते हैं। यह, ज़ाहिर है, एक मजाक है, लेकिन, संक्षेप में, जिस तरह से यह है।

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

एसवीजी गेम

कृपया ध्यान दें कि इसका ग्राफिक घटक बहुत सरल है और काफी "वेक्टर" दिखता है।

CSS चित्रों का उपयोग CSS से प्रभावित किया जा सकता है

हम पहले ही कह चुके हैं कि एसवीजी तत्व डोम में संग्रहीत किए जाते हैं, और इन तत्वों तक पहुंच जावास्क्रिप्ट कोड से प्राप्त की जा सकती है। CSS के मामले में, यह कहानी खुद को दोहराती है:

 <svg viewBox="0 0 100 100">   <circle cx="50" cy="50" r="50" />   <style>    circle { fill: blue; }  </style> </svg>

कृपया ध्यान दें कि उदाहरणों में <script> और <style> ब्लॉक को <svg> ब्लॉक के अंदर रखा गया है। यह पूरी तरह से सामान्य है। लेकिन अगर हम इस तथ्य को ध्यान में रखते हैं कि एसवीजी तत्व सामान्य एचटीएमएल कोड में है, तो यह पता चलता है कि आंतरिक <script> और <style> ब्लॉक को पूरी तरह से हटा दिया जा सकता है। इसके अलावा, यदि आवश्यक हो, तो आप बाहरी शैलियों और लिपियों का उपयोग करके एसवीजी तत्व पर काम कर सकते हैं।

यहां एसवीजी तत्वों और सीएसएस के गुणों के बारे में बहुत सारी सामग्री है। यहां सबसे महत्वपूर्ण बात यह है कि सीएसएस का उपयोग करके पृष्ठ तत्वों के साथ किया जा सकने वाला सब कुछ एसवीजी पर लागू होता है। उदाहरण के लिए, यह उपयोग कर रहा है :hover छद्म :hover और एनिमेशन तत्व।

यहां सीएसएस के साथ <circle> तत्व को एनिमेट करने का एक उदाहरण है।

 <svg viewBox="0 0 100 100">   <circle cx="50" cy="50" r="50" />   <style>    circle { fill: blue; animation: pulse 2s alternate infinite; }    @keyframes pulse {      100% {        r: 30;      }    }  </style>   <script>    document.querySelector('circle').addEventListener('click', e => {      e.target.style.fill = "red";    });  </script> </svg>

सीएसएस का उपयोग करते हुए सीएसएस तत्व एनिमेशन

एसवीजी और कैनवास का संयोजन

तकनीकी दृष्टिकोण से, कैनवास और एसवीजी प्रौद्योगिकियों को पारस्परिक रूप से अनन्य नहीं कहा जा सकता है। उदाहरण के लिए, एसवीजी छवियों को <canvas> तत्वों में प्रदर्शित किया जा सकता है। इसी समय, जैसा कि इस उदाहरण में देखा जा सकता है, <canvas> तत्व में प्रदर्शित एसवीजी छवियां बहुत अच्छी तरह से बहुत स्पष्ट और उच्च गुणवत्ता वाली रह सकती हैं।

आउटपुट SVG छवि <कैनवास> तत्व के लिए

अब आइए कुछ तालिकाएं देखें जो विभिन्न विशेषज्ञों द्वारा किए गए एसवीजी और कैनवास के बीच तुलना को संक्षेप में प्रस्तुत करते हैं।

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

▍रुथ जॉन

यहाँ परियोजना है जिसके आधार पर निम्न तालिका बनाई गई है।

अवसर	एसवीजी	कैनवास
वेक्टर ग्राफिक्स	+	-
रेखापुंज ग्राफिक्स	-	+
DOM तक पहुँच	+	-
उपलब्धता	+	±
पाठ आउटपुट	+	+
ग्रेडिएंट और पैटर्न का निष्कर्ष	+	+
सीएसएस एनीमेशन का समर्थन	+	-
सीएसएस फिल्टर समर्थन	+	+
एसवीजी फिल्टर सपोर्ट	+	+
छवि फ़ाइलों और वीडियो फ़ाइलों के आउटपुट के लिए समर्थन	-	+
निर्यात सामग्री	-	+
एकल पिक्सेल प्रबंधन	-	+
जावास्क्रिप्ट का उपयोग	-	+
एनीमेशन प्रदर्शन	±	+
मुख्य धागे के बाहर की गई गणना के लिए समर्थन	-	+

▍ सारा ड्रैसनर

निम्नलिखित ट्वीट इस ट्वीट पर आधारित है।

	DOM / वर्चुअल DOM	कैनवास
लाभ	UI / UX एनीमेशन के लिए बढ़िया है।	डांस, पिक्सल्स!
	आउटपुट रिज़ॉल्यूशन स्वतंत्र रिज़ॉल्यूशन SVG छवियों के लिए बढ़िया है।	3 डी ग्राफिक्स आउटपुट और अन्य समान उपयोग के मामलों के लिए बढ़िया है।
	डिबग करना आसान है।	कई चलती वस्तुओं को आसानी से प्रबंधित करें।
कमियों	छवियाँ कई अलग-अलग वस्तुओं से बनाई जाती हैं।	सामग्री को सुलभ बनाना कठिन है।
	पिछले ऋण के प्रकाश में, यह पता चला है कि एसवीजी छवियों को एनिमेट करते समय सावधानी बरतने की आवश्यकता होती है।	मानक रूप में, कैनवास चित्र रिज़ॉल्यूशन पर निर्भर होते हैं।
		छवि के व्यक्तिगत तत्वों के साथ उपयोगकर्ता इंटरैक्शन को व्यवस्थित करना मुश्किल है।

▍ शर्ली वू

निम्नलिखित ट्वीट इस ट्वीट पर आधारित है।

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

बहुत से लोग सोचते हैं कि कैनवास बड़ी संख्या में वस्तुओं के साथ काम करने के लिए बेहतर है (शर्ली के अनुसार - जब 1000 से अधिक हो)।

एसवीजी मानक विकल्प है। कैनवस एक गिरावट है

यहाँ एसवीजी और कैनवास का उपयोग करने के विकल्पों के बारे में मेरे ट्वीट का जवाब है। इस उत्तर के लेखक का कहना है कि एसवीजी और कैनवास के बीच का चुनाव इस तरह किया जाना चाहिए: "कैनवास का उपयोग करें जब आप एसवीजी का उपयोग नहीं कर सकते।" सामान्य रूप से एसवीजी का उपयोग करना जिन स्थितियों में संभव नहीं है उनमें से, हम उन वस्तुओं का उल्लेख कर सकते हैं जिनमें आपको हजारों वस्तुओं को चेतन करने की आवश्यकता है, छवि में प्रत्येक विशिष्ट पिक्सेल के साथ काम करना, और इसी तरह।

परिणाम

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

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

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

प्रिय पाठकों! आप किन स्थितियों में एसवीजी और किस कैनवास का उपयोग करते हैं?

एसवीजी या कैनवास?