SVG और HTML5 Canvas में क्या अंतर है?

HTML <svg> एलिमेंट SVG ग्राफिक्स के लिए एक कंटेनर है। SVG का अर्थ Scalable Vector Graphics है। SVG बॉक्स, सर्कल, टेक्स्ट आदि जैसे ग्राफिक्स परिभाषित करने के लिए उपयोगी है। SVG का अर्थ स्केलेबल वेक्टर ग्राफिक्स है और यह XML में 2D-ग्राफिक्स और ग्राफिकल एप्लिकेशन का वर्णन करने की एक भाषा है और XML को फिर SVG व्यूअर द्वारा रेंडर किया जाता है। अधिकांश वेब ब्राउज़र SVG को वैसे ही प्रदर्शित कर सकते हैं जैसे वे PNG, GIF, और JPG प्रदर्शित करते हैं।

HTML <canvas> एलिमेंट JavaScript के माध्यम से ग्राफिक्स बनाने के लिए उपयोग किया जाता है। <canvas> एलिमेंट ग्राफिक्स के लिए एक कंटेनर है।

उदाहरण: SVG

वेब पेज पर स्केलेबल वेक्टर ग्राफिक्स (SVG) जोड़ने का कोड:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #svgelem {
        position: relative;
        left: 50%;
        -webkit-transform: translateX(-20%);
        -ms-transform: translateX(-20%);
        transform: translateX(-20%);
      }
    </style>
    <title>HTML5 SVG</title>
  </head>
  <body>
    <h2 align="center">HTML5 SVG Circle</h2>
    <svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">
      <circle id="bluecircle" cx="60" cy="60" r="50" fill="blue" />
    </svg>
  </body>
</html>

उदाहरण: Canvas

HTML5 Canvas से आयत बनाने का कोड:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Canvas Tag</title>
  </head>
  <body>
    <canvas id="newCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
    <script>
      var c = document.getElementById('newCanvas');
      var ctx = c.getContext('2d');
      ctx.fillStyle = '#7cce2b';
      ctx.fillRect(0,0,300,100);
    </script>
  </body>
</html>

सारांश: SVG: वेक्टर, DOM-आधारित, स्केलेबल, CSS-स्टाइल करने योग्य, इवेंट हैंडलिंग आसान, प्रिंटिंग के लिए बेहतर। Canvas: रैस्टर, पिक्सेल-आधारित, उच्च प्रदर्शन (बहुत सारे ऑब्जेक्ट्स/एनिमेशन), गेम्स, रियल-टाइम रेंडरिंग।