Vẽ file SVG lên HTML5 Canvas

Để vẽ file SVG lên Canvas, bạn sử dụng phương thức drawImage() với một đối tượng Image có src trỏ đến file .svg.

Cách thực hiện

var ctx = canvas.getContext('2d');
var img = new Image();

// Quan trọng: Chờ load xong mới vẽ
img.onload = function() {
  ctx.drawImage(img, 0, 0); // Vẽ tại (0,0) kích thước gốc
  // Hoặc vẽ co giãn:
  // ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};

img.src = 'https://example.com/path/to/image.svg';

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html>
<body>
  <canvas id="myCanvas" width="400" height="300" style="border:1px solid #ccc"></canvas>
  <script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    
    var img = new Image();
    img.onload = function() {
      // Vẽ SVG lên canvas, co giãn vừa canvas
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      console.log('SVG rendered to canvas');
    };
    img.onerror = function() {
      console.error('Không tải được SVG');
    };
    // SVG demo từ Wikimedia
    img.src = 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png'; // Thay bằng SVG thật
  </script>
</body>
</html>

Lưu ý quan trọng

• CORS: File SVG phải cho phép CORS (Access-Control-Allow-Origin) nếu khác domain, nếu không canvas sẽ bị tainted → không thể toDataURL()/getImageData().
• Kích thước SVG: SVG vector nên không có width/height cố định. drawImage sẽ dùng intrinsic size (thường là viewBox). Nên chỉ định width/height khi vẽ.
• Security: SVG có thể chứa script → trình duyệt chặn script khi load qua Image(). Chỉ render phần hình ảnh.
• Animation: SVG animation (SMIL/CSS) không chạy khi vẽ qua Image(). Chỉ render frame tĩnh.

Vẽ một phần SVG (Clipping)

// Chỉ vẽ vùng (10,10) đến (110,110) của SVG, phóng to 2 lần
ctx.drawImage(img, 10, 10, 100, 100,  0, 0, 200, 200);

Thư viện hỗ trợ

• canvg - SVG parser/renderer sang Canvas (hỗ trợ nhiều feature SVG hơn Image()).
• svg-pathdata - Parse path SVG để vẽ thủ công.