Sự khác biệt giữa SVG và HTML5 Canvas là gì? Cả hai dường như đều làm như vậy với tôi. Về cơ bản, cả hai đều vẽ tác phẩm nghệ thuật vector bằng cách sử dụng các điểm tọa độ.
Tôi đang thiếu gì? Sự khác biệt chính giữa SVG và HTML5 Canvas là gì? Tại sao tôi nên chọn cái này hơn cái kia?
Câu trả lời:
Xem Wikipedia: http://en.wikipedia.org/wiki/Canvas_element
SVG là một tiêu chuẩn trước đây để vẽ các hình dạng trong trình duyệt. Tuy nhiên, SVG ở cấp độ cơ bản cao hơn vì mỗi hình dạng được vẽ được ghi nhớ như một đối tượng trong biểu đồ cảnh hoặc DOM, sau đó được hiển thị thành bản đồ bit. Điều này có nghĩa là nếu các thuộc tính của đối tượng SVG bị thay đổi, trình duyệt có thể tự động hiển thị lại cảnh.
Trong ví dụ trên, một khi hình chữ nhật được vẽ, thực tế là nó đã được vẽ bởi hệ thống. Nếu vị trí của nó bị thay đổi, toàn bộ cảnh sẽ cần phải được vẽ lại, bao gồm bất kỳ đối tượng nào có thể đã bị che bởi hình chữ nhật. Nhưng trong trường hợp SVG tương đương, người ta có thể chỉ cần thay đổi các thuộc tính vị trí của hình chữ nhật và trình duyệt sẽ xác định cách sơn lại nó. Cũng có thể vẽ canvas theo từng lớp và sau đó tạo lại các lớp cụ thể.
Hình ảnh SVG được thể hiện bằng XML, và các cảnh phức tạp có thể được tạo và duy trì bằng các công cụ chỉnh sửa XML.
Biểu đồ cảnh SVG cho phép các trình xử lý sự kiện được liên kết với các đối tượng, do đó, một hình chữ nhật có thể phản hồi sự kiện onClick. Để có được chức năng tương tự với canvas, người ta phải khớp tọa độ của lần nhấp chuột theo cách thủ công với tọa độ của hình chữ nhật đã vẽ để xác định xem nó có được nhấp hay không.
Về mặt khái niệm, canvas là một giao thức cấp thấp hơn mà SVG có thể được xây dựng. [Cần dẫn nguồn] Tuy nhiên, đây không phải là trường hợp (thông thường) — chúng là các tiêu chuẩn độc lập. Tình hình phức tạp vì có các thư viện đồ thị cảnh cho Canvas và SVG có một số chức năng thao tác bản đồ bit.
CẬP NHẬT: Tôi sử dụng SVG vì khả năng ngôn ngữ đánh dấu của nó - nó có thể được xử lý bởi XSLT và có thể giữ các đánh dấu khác trong các nút của nó. Tương tự, tôi có thể giữ SVG trong điểm đánh dấu (hóa học) của mình. Điều này cho phép tôi thao tác các thuộc tính SVG (ví dụ: kết xuất) bằng các tổ hợp đánh dấu. Điều này có thể khả thi trong Canvas nhưng tôi nghi ngờ rằng nó khó hơn rất nhiều.
SVG giống như một chương trình "bốc thăm". Bản vẽ được chỉ định là hướng dẫn vẽ cho từng hình dạng và bất kỳ phần nào của bất kỳ hình dạng nào cũng có thể được thay đổi. Bản vẽ được định hướng hình dạng.
Canvas giống như một chương trình "sơn". Khi các pixel chạm vào màn hình, đó là bản vẽ của bạn. Bạn không thể thay đổi hình dạng ngoại trừ bằng cách ghi đè chúng bằng các pixel khác. Các bức tranh được định hướng pixel.
Có thể thay đổi bản vẽ là rất quan trọng đối với một số chương trình; ví dụ như ứng dụng soạn thảo, công cụ vẽ sơ đồ, v.v ... Vì vậy, SVG có lợi thế hơn ở đây.
Có thể kiểm soát các pixel riêng lẻ là điều quan trọng đối với một số chương trình nghệ thuật.
Có được hiệu suất hoạt ảnh tuyệt vời để thao tác với người dùng thông qua kéo chuột dễ dàng hơn với Canvas so với SVG.
Một pixel trên màn hình máy tính thường sẽ tiêu tốn 4 byte thông tin và màn hình máy tính ngày nay chiếm vài MB. Vì vậy, Canvas có thể bất tiện nếu bạn muốn để người dùng chỉnh sửa hình ảnh rồi tải lên lại.
Ngược lại, việc vẽ một số ít các hình dạng bao phủ toàn bộ màn hình bằng SVG chiếm vài byte, tải xuống nhanh chóng và có thể tải lên lại dễ dàng với các lợi ích tương tự theo hướng đó như khi chuyển xuống theo hướng khác. Vì vậy, SVG có thể nhanh hơn Canvas.
Google đã triển khai Google Maps với SVG. Điều đó mang lại cho ứng dụng web hiệu suất linh hoạt và khả năng cuộn mượt mà.
Tóm tắt cấp cao của Canvas so với SVG
Tranh sơn dầu
SVG
Để biết sự khác biệt chi tiết, hãy đọc http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx
Có sự khác biệt về những gì họ đang có và những gì họ làm cho bạn.
Để giải thích một chút, về định dạng so với API:
Với svg, bạn có thể xem, lưu và chỉnh sửa tệp trong nhiều công cụ khác nhau. Với canvas bạn chỉ cần vẽ và không có gì được giữ lại về những gì bạn vừa làm ngoài hình ảnh kết quả trên màn hình. Bạn có thể tạo hoạt ảnh cho cả hai, SVG xử lý việc vẽ lại cho bạn bằng cách chỉ xem các phần tử và thuộc tính được chỉ định, trong khi với canvas, bạn phải tự vẽ lại từng khung bằng cách sử dụng API. Bạn có thể chia tỷ lệ cả hai, nhưng SVG thực hiện nó tự động, trong khi với canvas một lần nữa, bạn phải đưa ra lại lệnh vẽ cho kích thước đã cho.
Hai điều khiến tôi hứng thú nhất đối với SVG và Canvas là,
Khả năng sử dụng Canvas mà không cần DOM, trong đó SVG phụ thuộc nhiều vào DOM và do độ phức tạp tăng lên nên hiệu suất sẽ chậm lại. Giống như trong thiết kế trò chơi.
Lợi thế của việc sử dụng SVG sẽ là độ phân giải vẫn giữ nguyên trên các nền tảng thiếu Canvas.
Nhiều chi tiết hơn được cung cấp trong trang web này. http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/
Nó hoàn toàn phụ thuộc vào nhu cầu / yêu cầu của bạn.
Nếu bạn chỉ muốn hiển thị hình ảnh / biểu đồ trên màn hình thì cách tiếp cận được đề xuất là canvas. (Ví dụ là PNG, GIF, BMP, v.v.)
Nếu bạn muốn mở rộng các tính năng của đồ họa của mình, chẳng hạn nếu bạn di chuột qua biểu đồ muốn phóng to khu vực nhất định mà không làm hỏng chất lượng hiển thị thì bạn chọn SVG. (Ví dụ điển hình là tệp AutoCAD, Visio, GIS).
Nếu bạn muốn xây dựng một công cụ tạo sơ đồ luồng động với trình kết nối hình dạng, tốt hơn nên chọn SVG thay vì CANVAS.
Khi kích thước của màn hình tăng lên, canvas bắt đầu giảm xuống do cần phải vẽ nhiều pixel hơn.
Khi số lượng đối tượng tăng lên trên màn hình, SVG bắt đầu
giảm xuống khi chúng tôi liên tục thêm chúng vào DOM.
Ngoài ra, vui lòng tham khảo: http://msdn.microsoft.com/en-us/library/gg193983(v=vs.85).aspx
SVG
Dựa trên trường hợp sử dụng, SVG được sử dụng cho logo, biểu đồ vì đồ họa vector của nó bạn vẽ và quên mất nó. Khi cổng xem thay đổi như định cỡ lại (hoặc thu phóng), nó sẽ tự điều chỉnh và không cần vẽ lại.
Tranh sơn dầu
Canvas là bitmap (hoặc raster) nó được thực hiện bằng cách sơn các pixel lên màn hình. Nó được sử dụng để phát triển trò chơi hoặc trải nghiệm đồ họa ( https://www.chromeexperiments.com/webgl ) trong một khu vực nhất định mà nó vẽ pixel và thay đổi bằng cách vẽ lại nó. Vì nó là loại raster nên chúng ta cần vẽ lại toàn bộ khi xem các thay đổi của cổng.
Tài liệu tham khảo
http://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas
http://en.wikipedia.org/wiki/WebGL
http://vector-conversions.com/vectorizing/raster_vs_vector.html
SVGlà một đặc tả của một bản vẽ giống như một định dạng tệp. SVG là một tài liệu. Bạn có thể trao đổi tệp SVG giống như tệp HTML. Ngoài ra, vì các phần tử SVG và các phần tử HTML chia sẻ cùng một API DOM, nên có thể sử dụng JavaScript để tạo SVG DOM theo cách giống như cách có thể tạo HTML DOM. Nhưng bạn không cần JavaScript để tạo tệp SVG. Một trình soạn thảo văn bản đơn giản là đủ để viết một SVG. Nhưng bạn cần ít nhất một máy tính để tính tọa độ của các hình trong bản vẽ.
CANVASchỉ là một khu vực vẽ. Cần phải sử dụng JavaScript để tạo nội dung của canvas. Bạn không thể trao đổi một canvas. Nó không phải là tài liệu. Và các phần tử của canvas không phải là một phần của cây DOM. Bạn không thể sử dụng API DOM để thao tác nội dung của canvas. Thay vào đó, bạn phải sử dụng một API canvas chuyên dụng để vẽ các hình dạng vào canvas.
Ưu điểm của a SVGlà bạn có thể trao đổi bản vẽ như một tài liệu. Ưu điểm của CANVASnó là có một API JavaScript ít dài dòng hơn để tạo nội dung.
Đây là một ví dụ cho thấy rằng bạn có thể đạt được kết quả tương tự, nhưng cách thực hiện điều đó trong JavaScript rất khác.
// Italic S in SVG
(function () {
const ns='http://www.w3.org/2000/svg';
let s = document.querySelector('svg');
let p = document.createElementNS (ns, 'path');
p.setAttribute ('id', 'arc');
p.setAttribute ('d', 'M 0.9 -0.9 a 0.8,0.4 -10 0,0 -0.9,0.9');
s.appendChild (p);
let u = document.createElementNS (ns, 'use');
u.setAttribute ('href', '#arc');
u.setAttribute ('transform', 'rotate(180)');
s.appendChild (u);
})();
// Italic S in CANVAS
(function () {
let c = document.querySelector('canvas');
let w = c.width = c.clientWidth;
let h = c.height = c.clientHeight;
let x = c.getContext('2d');
x.lineWidth = 0.05 * w;
x.moveTo (w/2, h/2);
x.bezierCurveTo (w*0.02, h*0.4,
w*0.4, -h*0.02,
w*0.95, h*0.05);
x.moveTo (w/2, h/2);
x.bezierCurveTo (w*(1-0.02), h*(1-0.4),
w*(1-0.4), h*(1+0.02),
w*(1-0.95), h*(1-0.05));
x.stroke();
})();svg, canvas {
width: 3em;
height: 3em;
}
svg {
vertical-align: text-top;
stroke: black;
stroke-width: 0.1;
fill: none;
}
canvas {
vertical-align: text-bottom;
}
div {
float: left;
}<div><svg viewBox="-1 -1 2 2"></svg>VG</div>
<div>CANVA<canvas></canvas></div>Như bạn có thể thấy kết quả gần như giống nhau, nhưng mã JavaScript hoàn toàn khác.
SVG được tạo ra với các API DOM sử dụng createElement, setAttributevà appendChild. Tất cả đồ họa nằm trong chuỗi thuộc tính. SVG có nhiều nguyên thủy mạnh mẽ hơn. Ví dụ, CANVAS không có gì tương đương với đường dẫn vòng cung SVG. Ví dụ CANVAS cố gắng mô phỏng cung SVG với đường cong Bezier. Trong SVG, bạn có thể sử dụng lại các phần tử để biến đổi chúng. Trong CANVAS, bạn không thể sử dụng lại các phần tử. Thay vào đó, bạn phải viết một hàm JavaScript để gọi nó hai lần. SVG có một viewBoxcho phép sử dụng các tọa độ chuẩn hóa, giúp đơn giản hóa các phép quay. Trong CANVAS, bạn phải tự tính toán các tọa độ dựa trên clientWidthvàclientHeight. Và bạn có thể tạo kiểu cho tất cả các phần tử SVG bằng CSS. Trong CANVAS, bạn không thể tạo kiểu bất kỳ thứ gì bằng CSS. Vì SVG là một DOM, bạn có thể chỉ định trình xử lý sự kiện cho tất cả các phần tử SVG. Các phần tử trong CANVAS không có DOM và không có trình xử lý sự kiện DOM.
Nhưng mặt khác, mã CANVAS dễ đọc hơn nhiều. Bạn không cần quan tâm đến không gian tên XML. Và bạn có thể gọi trực tiếp các hàm đồ họa, vì bạn không cần phải xây dựng DOM.
Bài học rất rõ ràng: nếu bạn muốn nhanh chóng vẽ một số đồ họa, hãy sử dụng CANVAS. Nếu bạn cần chia sẻ đồ họa, muốn tạo kiểu bằng CSS hoặc muốn sử dụng trình xử lý sự kiện DOM trong đồ họa của mình, hãy xây dựng một SVG.
thêm vào những điểm trên:
SVG nhẹ để chuyển qua web khi so sánh với JPEG, GIF, v.v. và nó cũng mở rộng cực kỳ khi thay đổi kích thước mà không làm giảm chất lượng.
SVG
Nó dựa trên Mô hình Đối tượng.
Thích hợp để sử dụng các khu vực kết xuất lớn.
SVG cung cấp bất kỳ hỗ trợ nào cho người xử lý sự kiện.
Cho phép sửa đổi thông qua tập lệnh và CSS.
SVG có khả năng mở rộng tốt hơn
SVG dựa trên Vector (bao gồm các hình dạng).
SVG không phù hợp với đồ họa Trò chơi. SVG không phụ thuộc vào độ phân giải.
SVG có khả năng cho hoạt ảnh API.
SVG phù hợp để in với chất lượng cao và bất kỳ độ phân giải nào.
Yếu tố canvas
Nó dựa trên pixel.
Thích hợp để sử dụng kết xuất nhỏ
Canvas không cung cấp bất kỳ truy đòi nào cho người xử lý sự kiện.
Chỉ được phép sửa đổi thông qua tập lệnh.
Canvas có khả năng mở rộng kém.
Canvas dựa trên Raster (bao gồm một pixel).
Canvas thích hợp cho đồ họa trò chơi.
Canvas hoàn toàn phụ thuộc vào độ phân giải.
Canvas không có bất kỳ API nào cho hoạt ảnh.
Canvas không thích hợp để in chất lượng cao và độ phân giải cao.