1. SVG là gì ?

SVG là viết tắt của Scalable Vector Graphics

SVG được sử dụng để xác định đồ họa cho Web

SVG là một khuyến nghị của W3C

2. Phần tử <svg> trong HTML

Phần tử <svg> trong HTML là vùng chứa đồ họa SVG

SVG có một số phương pháp để vẽ đường dẫn, hộp, hình tròn, văn bản và hình ảnh đồ họa

Các trình duyệt hỗ trợ phần tử <svg>

Tình duyệt
<canvas>	4.0	9.0	3.0	3.2	10.1

3. Một số ví dụ về <svg> trong HTML

3.1 Vẽ vòng tròng bằng SVG

Ví dụ:

3.2  Vẽ hình chữ nhật bằng SVG

Ví dụ:

Bạn cũng có thể vẽ hình chữ nhật có cạnh vát tròn bằng cách sau:

3.3 Vẽ hình ngôi sao bằng SVG

Ví dụ:

3.4 Tạo biểu tượng bằng SVG

Ví dụ:

4. Sự khác biệt giữa SVG và Canvas

SVG là một ngôn ngữ để mô tả đồ họa 2D trong XML

Canvas vẽ đồ họa 2D một cách nhanh chóng (với JavaScript)

SVG dựa trên XML, có nghĩa là mọi phần tử đều có sẵn trong SVG DOM. Bạn có thể đính kèm các trình xử lý JavaScript cho phần tử

Trong SVG, mỗi hình dạng được vẽ được ghi nhớ như một đối tượng. 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 hình dạng

Canvas được kết xuất từng pixel một. Trong canvas, một khi đồ họa được vẽ, nó sẽ bị trình duyệt quên. Nếu vị trí của nó phải thay đổi, toàn bộ phải được vẽ lại, bao gồm bất kỳ đối tượng nào có thể đã bị che bởi đồ họa