HTML 5 कैनवस vs. SVG

कैनवस और SVG दोनों ब्राउज़र में ग्राफिक्स बनाने की अनुमति देते हैं, लेकिन वे मूलत: अलग-अलग हैं。

SVG

SVG एक 2D ग्राफिक्स को XML के द्वारा वर्णित करने वाली भाषा है。

SVG XML पर आधारित है, इसलिए SVG DOM में प्रत्येक एलीमेंट उपलब्ध है।आप किसी भी एलीमेंट पर जेसक्रिप्ट इवेंट हैंडलर जोड़ सकते हैं。

SVG में, प्रत्येक ड्रा की गई ग्राफिक्स को एक ऑब्जैक्ट के रूप में देखा जाता है।यदि SVG ऑब्जैक्ट की गुण के रूप में परिवर्तन होते हैं, तो ब्राउज़र स्वचालित रूप से ग्राफिक्स को फिर से ड्रा कर सकता है。

कैनवस

कैनवस जेसक्रिप्ट के द्वारा 2D ग्राफिक्स ड्रा करता है。

कैनवस पिक्सल द्वारा रेंडरिंग करता है。

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

कैनवस और SVG का तुलना

नीचे दिए गए पटल में कैनवस और SVG के बीच कुछ अंतरों को दिखाया गया है。

कैनवस

  • रेजोल्यूशन पर निर्भर
  • इवेंट हैंडलर समर्थन नहीं
  • दृश्यमान लिपि रेंडरिंग की कम शक्ति
  • परिणाम इमेज को .png या .jpg फॉर्मेट में सहेजा जा सकता है
  • इमेज घनत्व वाले गेमों के लिए सबसे अच्छा (जिनमें कई वस्तुओं को बार-बार री-रेंडर किया जाता है)

SVG

  • रेजोल्यूशन पर निर्भर नहीं
  • इवेंट हैंडलर समर्थन
  • बड़े रेंडरिंग क्षेत्र वाले अनुप्रयोगों (जैसे गूगल मानचित्र) के लिए सबसे अच्छा
  • जटिलता अधिक होने से रेंडरिंग की गति कम होगी (DOM का अतिरिक्त उपयोग करने वाले किसी भी अनुप्रयोग की गति नहीं तेज है)
  • गेम अनुप्रयोग के लिए अनुचित