Sự khác biệt giữa SVG và HTML5 Canvas là gì?

Phần tử HTML

SVG	HTML Canvas
SVG có khả năng mở rộng tốt hơn. Vì vậy, nó có thể được in với chất lượng cao ở bất kỳ độ phân giải nào	Canvas có khả năng mở rộng kém. Do đó nó không phù hợp để in ở độ phân giải cao hơn
SVG cho hiệu suất tốt hơn với số lượng đối tượng nhỏ hơn hoặc bề mặt lớn hơn.	Canvas cho hiệu suất tốt hơn với bề mặt nhỏ hơn hoặc số lượng đối tượng lớn hơn.
SVG có thể được sửa đổi thông qua tập lệnh và CSS	Canvas chỉ có thể được sửa đổi thông qua tập lệnh
SVG dựa trên vector và bao gồm các hình dạng.	Canvas dựa trên raster và bao gồm pixel.

Ví dụ

bạn có thể thử chạy mã sau để thêm đồ họa vectơ có thể mở rộng (SVG) vào trang web -

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

Ví dụ

Bạn có thể thử chạy đoạn mã sau để tìm hiểu cách vẽ hình chữ nhật bằng 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>