एसवीजी और एचटीएमएल 5 कैनवस के बीच अंतर क्या है?

Question

एसवीजी और एचटीएमएल 5 कैनवस के बीच अंतर क्या हैं? वे दोनों मुझे ऐसा ही करने लगते हैं। मूलतः, वे दोनों समन्वय बिंदुओं का उपयोग करके वेक्टर कलाकृति बनाते हैं।

मैं क्या खो रहा हूँ? एसवीजी और एचटीएमएल 5 कैनवस के बीच प्रमुख अंतर क्या हैं? मुझे एक को दूसरे पर क्यों चुनना चाहिए?

Comments

विकिपीडिया पर इस पर एक उपयोगी लेख है: कैनवस बनाम स्केलेबल वेक्टर ग्राफिक्स (एसवीजी)

— रुडू

कैनवास, जैसा कि मैं समझता हूं, यह वेक्टर ग्राफिक्स के लिए प्रदान नहीं करता है। यह सब बिटमैप के बारे में है।

— बॉबी जैक

एचटीएमएल 5 कैनवस बनाम एसवीजी / वीएमएल के

— फ़िरोज़

कैनवस रेखापुंज ग्राफिक्स हैं और svgs वेक्टर ग्राफिक्स हैं जो स्केलेबल हैं। Sitepoint लिंक द्वारा सर्वश्रेष्ठ explaination: sitepoint.com/canvas-vs-svg-choosing-the-right-tool-for-the-job

— MechaCode

Answer 1

विकिपीडिया: http://en.wikipedia.org/wiki/Canvas_element देखें

एसवीजी ब्राउज़रों में आकृतियाँ बनाने के लिए एक पूर्व मानक है। हालांकि, एसवीजी एक मौलिक रूप से उच्च स्तर पर है क्योंकि प्रत्येक खींची गई आकृति को एक दृश्य ग्राफ या डीओएम में एक वस्तु के रूप में याद किया जाता है, जिसे बाद में थोड़ा मानचित्र प्रदान किया जाता है। इसका मतलब यह है कि यदि एसवीजी ऑब्जेक्ट की विशेषताओं को बदल दिया जाता है, तो ब्राउज़र स्वचालित रूप से दृश्य को फिर से प्रस्तुत कर सकता है।

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

एसवीजी छवियों को एक्सएमएल में दर्शाया गया है, और जटिल दृश्यों को एक्सएमएल संपादन टूल के साथ बनाया और बनाए रखा जा सकता है।

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

वैचारिक रूप से, कैनवास एक निम्न स्तर का प्रोटोकॉल है, जिस पर SVG का निर्माण किया जा सकता है। [उद्धरण वांछित] हालांकि, यह (सामान्य रूप से) मामला नहीं है - वे स्वतंत्र मानक हैं। स्थिति जटिल है क्योंकि कैनवस के लिए दृश्य ग्राफ लाइब्रेरी हैं, और एसवीजी में कुछ बिट मैप हेरफेर कार्यक्षमता है।

अद्यतन: मैं अपनी मार्कअप भाषा क्षमताओं के कारण एसवीजी का उपयोग करता हूं - यह एक्सएसएलटी द्वारा संसाधित किया जा सकता है और इसके नोड्स में अन्य मार्कअप को पकड़ सकता है। इसी तरह मैं अपने मार्कअप (रसायन विज्ञान) में एसवीजी पकड़ सकता हूं। यह मुझे मार्कअप के संयोजन द्वारा एसवीजी विशेषताओं (जैसे प्रतिपादन) में हेरफेर करने की अनुमति देता है। यह कैनवस में संभव हो सकता है लेकिन मुझे संदेह है कि यह बहुत कठिन है।

Comments

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

— एरिक डेहलस्त्रोम

@ मैं आपसे सहमत हूँ। ऐसा लगता है कि WP प्रविष्टि को संपादन की आवश्यकता है

— peter.murray.rust

यह अधिकांश अनुप्रयोगों के लिए लगता है, एसवीजी कैनवस से बेहतर है। क्या यह सच है? क्या ऐसा कुछ है जो कैनवस ऐसा कर सकता है जो एसवीजी नहीं कर सकता है

— एमसीवी

मुझे पता है कि यह वर्षों बाद है, लेकिन आज कई कैनवास पुस्तकालय हैं, जैसे कागज़। जेएस और फैब्रिक। जेएस

— लोलनारज़ानोव

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

— PirateApp

Answer 2

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

कैनवस एक "पेंट" कार्यक्रम की तरह है। एक बार जब पिक्सल स्क्रीन पर आ जाता है, तो यह आपकी ड्राइंग है। आप उन्हें अन्य पिक्सेल के साथ अधिलेखित करने के अलावा आकार नहीं बदल सकते। पेंटिंग पिक्सेल-उन्मुख हैं।

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

व्यक्तिगत पिक्सेल को नियंत्रित करने में सक्षम होना कुछ कलात्मक कार्यक्रमों के लिए महत्वपूर्ण है।

माउस ड्रग्स के माध्यम से उपयोगकर्ता-हेरफेर के लिए महान एनीमेशन प्रदर्शन प्राप्त करना एसवीजी की तुलना में कैनवस के साथ आसान है।

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

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

Google ने SVG के साथ Google मानचित्र लागू किया। जो कि वेब एप को इसके zippy परफॉर्मेंस और स्मूथ स्क्रॉलिंग की सुविधा देता है।

Comments

आपको वोट देने नहीं जा रहा है - Google मानचित्र का नया संस्करण वास्तव में अब कैनवास का उपयोग करता है, svg का नहीं। Svg संस्करण अब हटा दिया गया है।

— दूनियादंड

Answer 3

कैनवस बनाम एसवीजी का उच्च स्तरीय सारांश

कैनवास

1. पिक्सेल आधारित (डायनैमिक .png)
2. एकल HTML तत्व। (डेवलपर टूल में तत्व का निरीक्षण करें। आप केवल कैनवास टैग देख सकते हैं)
3. केवल स्क्रिप्ट के माध्यम से संशोधित
4. ईवेंट मॉडल / उपयोगकर्ता इंटरैक्शन दानेदार (x, y) है
5. प्रदर्शन छोटी सतह, वस्तुओं की बड़ी संख्या (> 10k), या दोनों के साथ बेहतर है

एसवीजी

1. आकार आधारित
2. एकाधिक चित्रमय तत्व, जो DOM का हिस्सा बनते हैं
3. स्क्रिप्ट और सीएसएस के माध्यम से संशोधित
4. ईवेंट मॉडल / उपयोगकर्ता इंटरैक्शन सार है (रेक्ट, पाथ)
5. वस्तुओं की छोटी संख्या (<10k), एक बड़ी सतह या दोनों के साथ प्रदर्शन बेहतर है

विस्तृत अंतर के लिए, http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx पढ़ें

Answer 4

वे क्या हैं, और वे आपके लिए क्या करते हैं, इसमें अंतर है।

• एसवीजी स्केलेबल वेक्टर ग्राफिक्स के लिए एक दस्तावेज़ प्रारूप है।
• कैनवस एक विशिष्ट आकार के बिटमैप पर वेक्टर ग्राफिक्स खींचने के लिए एक जावास्क्रिप्ट एपीआई है।

प्रारूप बनाम एपीआई पर थोड़ा विस्तार करने के लिए:

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

Comments

शायद सभी सवालों के सबसे निष्पक्ष और तकनीकी रूप से सटीक। SVG डॉक्यूमेंट फॉर्मेट है, जो सर्वर (ज्यादातर स्टैटिक) या क्लाइंट इटसेलेफ पर बनाया जाता है। एक कैनवास फ्रेम तस्वीर से ज्यादा कुछ नहीं है। तो स्वाभाविक रूप से आपको इसे फिर से तैयार करना होगा जिसकी एपीआई है।

— user568109

Answer 5

एसवीजी और कैनवस के लिए दो चीजें जो मुझे सबसे ज्यादा प्रभावित करती थीं,

डोम के बिना कैनवस का उपयोग करने की क्षमता, जहां एसवीजी डोम पर बहुत अधिक निर्भर करती है और जैसे-जैसे जटिलता बढ़ती है, प्रदर्शन धीमा हो जाता है। जैसे गेम डिजाइन में।

एसवीजी का उपयोग करने का लाभ यह होगा कि रिज़ॉल्यूशन उन प्लेटफार्मों पर समान रहता है जिनमें कैनवस का अभाव है।

इस साइट में बहुत अधिक विवरण दिए गए हैं। http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

Answer 6

यह पूरी तरह से आपकी आवश्यकता / आवश्यकता पर निर्भर करता है।

• यदि आप एक छवि / चार्ट को केवल स्क्रीन पर दिखाना चाहते हैं तो अनुशंसित दृष्टिकोण कैनवास है। (उदाहरण PNG, GIF, BMP आदि है)

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

अगर आप डायनामिक फ्लो डायग्राम क्रिएटर टूल को शेप कनेक्टर के साथ बनाना चाहते हैं तो CANVAS के बजाय SVG का चयन करना बेहतर है।

• जब स्क्रीन का आकार बढ़ता है, तो कैनवास को नीचा दिखाना शुरू हो जाता है क्योंकि अधिक पिक्सेल खींचने की आवश्यकता होती है।

• जब स्क्रीन पर वस्तुओं की संख्या बढ़ जाती है, एसवीजी कम होने लगती
  है क्योंकि हम उन्हें लगातार डोम में जोड़ रहे हैं।

कृपया यह भी देखें: http://msdn.microsoft.com/en-us/library/gg193983(v=vs.85x.nx

Answer 7

एसवीजी

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

कैनवास

कैनवास बिटमैप (या रेखापुंज) है जो इसे स्क्रीन पर पिक्सेल की पेंटिंग द्वारा किया जाता है। इसका उपयोग किसी दिए गए क्षेत्र में गेम या ग्राफिक्स अनुभव ( https://www.chromeexperiments.com/webgl ) विकसित करने के लिए किया जाता है, यह पिक्सेल को पेंट करता है और इसे फिर से बनाता है। चूंकि इसका रेखापुंज प्रकार हमें पोर्ट परिवर्तन देखने के रूप में पूरी तरह से फिर से तैयार करने की आवश्यकता है।

संदर्भ

http://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas

http://en.wikipedia.org/wiki/WebGL

http://vector-conversions.com/vectorizing/raster_vs_vector.html

Answer 8

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

CANVASसिर्फ एक ड्राइंग क्षेत्र है। कैनवास की सामग्री उत्पन्न करने के लिए जावास्क्रिप्ट का उपयोग करना आवश्यक है। आप एक कैनवस का आदान-प्रदान नहीं कर सकते। यह कोई दस्तावेज नहीं है। और कैनवास के तत्व डोम ट्री का हिस्सा नहीं हैं। आप एक कैनवास की सामग्री में हेरफेर करने के लिए DOM API का उपयोग नहीं कर सकते हैं। इसके बजाय आपको कैनवास में आकृतियाँ बनाने के लिए एक समर्पित कैनवास एपीआई का उपयोग करना होगा।

का लाभ यह SVGहै कि, आप एक दस्तावेज के रूप में ड्राइंग का आदान-प्रदान कर सकते हैं। का लाभCANVAS है कि इसमें कंटेंट जेनरेट करने के लिए वर्बोज़ जावास्क्रिप्ट एपीआई कम है।

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

// Italic S in SVG

(function () {

  const ns='http://www.w3.org/2000/svg';
  let s = document.querySelector('svg');
  let p = document.createElementNS (ns, 'path');
  p.setAttribute ('id', 'arc');
  p.setAttribute ('d', 'M 0.9 -0.9 a 0.8,0.4 -10 0,0 -0.9,0.9');
  s.appendChild (p);
  let u = document.createElementNS (ns, 'use');
  u.setAttribute ('href', '#arc');
  u.setAttribute ('transform', 'rotate(180)');
  s.appendChild (u);

})();

// Italic S in CANVAS

(function () {

  let c = document.querySelector('canvas');
  let w = c.width = c.clientWidth;
  let h = c.height = c.clientHeight;
  let x = c.getContext('2d');
  x.lineWidth = 0.05 * w;
  x.moveTo (w/2, h/2);
  x.bezierCurveTo (w*0.02, h*0.4,
                   w*0.4, -h*0.02,
                   w*0.95, h*0.05);
  x.moveTo (w/2, h/2);
  x.bezierCurveTo (w*(1-0.02), h*(1-0.4),
                   w*(1-0.4), h*(1+0.02),
                   w*(1-0.95), h*(1-0.05));
  x.stroke();

})();

svg, canvas {
  width: 3em;
  height: 3em;
}

svg {
  vertical-align: text-top;
  stroke: black;
  stroke-width: 0.1;
  fill: none;
}

canvas {
  vertical-align: text-bottom;
}

div {
  float: left;
}

<div><svg viewBox="-1 -1 2 2"></svg>VG</div>
<div>CANVA<canvas></canvas></div>

जैसा कि आप देख सकते हैं कि परिणाम लगभग समान है, लेकिन जावास्क्रिप्ट कोड पूरी तरह से अलग है।

SVG DOM API का उपयोग करके बनाया गया है createElement, setAttributeऔर appendChild। सभी ग्राफिक्स फ़ीचर स्ट्रिंग्स में हैं। एसवीजी में अधिक शक्तिशाली आदिम हैं। उदाहरण के लिए CANVAS में SVG चाप पथ के बराबर कुछ भी नहीं है। CANVAS उदाहरण एसवीजी चाप को एक बेज़ियर वक्र के साथ अनुकरण करने की कोशिश करता है। एसवीजी में आप उन्हें बदलने के लिए तत्वों का पुन: उपयोग कर सकते हैं। CANVAS में आप तत्वों का पुन: उपयोग नहीं कर सकते। इसके बजाय आपको दो बार कॉल करने के लिए जावास्क्रिप्ट फ़ंक्शन लिखना होगा। एसवीजी के पास viewBoxसामान्यीकृत निर्देशांक का उपयोग करने की अनुमति है, जो रोटेशन को सरल करता है। CANVAS में आपको खुद के आधार पर निर्देशांक की गणना करनी होगीclientWidth औरclientHeight। और आप CSS के साथ सभी SVG एलिमेंट्स को स्टाइल कर सकते हैं। CANVAS में आप CSS के साथ कुछ भी स्टाइल नहीं कर सकते। क्योंकि SVG एक DOM है, आप सभी SVG एलिमेंट्स को इवेंट हैंडलर असाइन कर सकते हैं। CANVAS के तत्वों में कोई DOM और कोई DOM इवेंट हैंडलर नहीं है।

लेकिन दूसरी ओर CANVAS कोड को पढ़ना बहुत आसान है। आपको XML नाम रिक्त स्थान की परवाह करने की आवश्यकता नहीं है। और आप सीधे ग्राफिक्स फ़ंक्शन को कॉल कर सकते हैं, क्योंकि आपको डोम बनाने की आवश्यकता नहीं है।

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

Answer 9

उपरोक्त बिंदुओं को जोड़ना:

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

Answer 10

एसवीजी
यह ऑब्जेक्ट मॉडल आधारित है।
बड़े रेंडरिंग क्षेत्रों का उपयोग करने के लिए उपयुक्त है।
SVG ईवेंट हैंडलर के लिए कोई समर्थन प्रदान करता है।
स्क्रिप्ट और सीएसएस के माध्यम से संशोधन की अनुमति है।
एसवीजी में बेहतर स्केलेबिलिटी है
एसवीजी वेक्टर आधारित (आकृतियों से बना) है।
एसवीजी गेम ग्राफिक्स के लिए उपयुक्त नहीं है। एसवीजी संकल्प पर निर्भर नहीं करता है।
एसवीजी एपीआई एनीमेशन के लिए सक्षम है।
एसवीजी उच्च गुणवत्ता और किसी भी संकल्प के साथ मुद्रण के लिए उपयुक्त है।

कैनवास के तत्व

यह पिक्सेल आधारित है।

छोटे प्रतिपादन का उपयोग करने के लिए उपयुक्त है

कैनवस इवेंट हैंडलर्स के लिए कोई सहारा नहीं देता है।

केवल स्क्रिप्ट के माध्यम से संशोधन की अनुमति है।

कैनवस में खराब मापनीयता है।

कैनवस रेखापुंज आधारित (एक पिक्सेल से बना) है।

कैनवस गेम ग्राफिक्स के लिए उपयुक्त है।

कैनवस पूरी तरह से संकल्प पर निर्भर है।

कैनवस के पास एनीमेशन के लिए कोई एपीआई नहीं है।

उच्च गुणवत्ता और उच्च रिज़ॉल्यूशन को मुद्रित करने के लिए कैनवास उपयुक्त नहीं है।