SVG এবং HTML5 ক্যানভাসের মধ্যে পার্থক্য কী?

HTML

SVG	HTML ক্যানভাস
SVG এর আরও ভালো মাপযোগ্যতা রয়েছে। তাই এটি যেকোনো রেজোলিউশনে উচ্চ মানের সঙ্গে প্রিন্ট করা যায়	ক্যানভাসের দুর্বল মাপযোগ্যতা আছে। তাই এটি উচ্চ রেজোলিউশনে মুদ্রণের জন্য উপযুক্ত নয়
SVG কম সংখ্যক বস্তু বা বৃহত্তর পৃষ্ঠের সাথে আরও ভাল কার্যক্ষমতা দেয়৷	ক্যানভাস ছোট সারফেস বা বড় সংখ্যক বস্তুর সাথে ভালো পারফরম্যান্স দেয়।
SVG স্ক্রিপ্ট এবং CSS এর মাধ্যমে পরিবর্তন করা যেতে পারে	ক্যানভাস শুধুমাত্র স্ক্রিপ্টের মাধ্যমে পরিবর্তন করা যেতে পারে
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>

উদাহরণ

আপনি HTML5 ক্যানভাস -

দিয়ে আয়তক্ষেত্র আঁকতে শিখতে নিম্নলিখিত কোডটি চালানোর চেষ্টা করতে পারেন

<!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>