SVG định nghĩa đồ họa dựa trên vector dưới dạng định dạng XML.
SVG là gì?
SVG viết tắt của Scalable Vector Graphics (Đồ họa Vector có thể tỉ lệ).
SVG được sử dụng để xác định đồ họa cho Web.
SVG là một đề xuất của W3C (World Wide Web Consortium).
Thẻ HTML <svg>
Thẻ HTML <svg> là một bộ chứa cho đồ họa SVG.
SVG có một số phương pháp để vẽ các đường dẫn, hình chữ nhật, hình tròn, văn bản và hình ảnh đồ họa.
Hỗ trợ trình duyệt
Các con số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn phần tử <svg>.
Phần tử Chrome Firefox IE Opera Safari
<svg> 4.0 9.0 3.0 3.2 10.1
Hình tròn trong SVG
Ví dụ về Hình tròn trong SVG
<!DOCTYPE html><html><body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg></body></html>Hình chữ nhật trong SVG
Ví dụ về Hình chữ nhật trong SVG
<svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /></svg>Hình chữ nhật bo góc trong SVG
Ví dụ về Hình chữ nhật bo góc trong SVG
<svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /></svg>Ngôi sao trong SVG
Ví dụ về Sao trong SVG
<svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /></svg>Logo trong SVG
Ví dụ về Logo SVG
<svg height="130" width="500"><defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient></defs><ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /><text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text> Xin lỗi, trình duyệt của bạn không hỗ trợ SVG nội tuyến.</svg>Sự khác biệt giữa SVG và Canvas
SVG là một ngôn ngữ để mô tả đồ họa 2D trong định dạng XML.
Canvas vẽ đồ họa 2D, ngay lập tức (bằng JavaScript).
SVG dựa trên XML, điều này có nghĩa là mọi phần tử đều có sẵn trong DOM SVG. Bạn có thể gắn các bộ xử lý sự kiện JavaScript cho một phần tử.
Trong SVG, mỗi hình vẽ được nhớ như một đối tượng. Nếu thuộc tính của một đối tượng SVG bị thay đổi, trình duyệt có thể vẽ lại hình tự động.
Canvas được vẽ từng pixel một. Trong canvas, khi đồ họa đã được vẽ, nó sẽ bị quên bởi trình duyệt. Nếu vị trí của nó phải thay đổi, toàn bộ cảnh phải được vẽ lại, bao gồm bất kỳ đối tượng nào có thể đã bị che phủ bởi hình ảnh.
So sánh giữa Canvas và SVG
Bảng dưới đây cho thấy một số sự khác biệt quan trọng giữa Canvas và SVG:
| Canvas | SVG |
| Phụ thuộc vào độ phân giải | Độc lập với độ phân giải |
| Không hỗ trợ bộ xử lý sự kiện | Hỗ trợ bộ xử lý sự kiện |
| Khả năng hiển thị văn bản kém | Khả năng hiển thị văn bản tốt |
| Bạn có thể lưu hình ảnh kết quả dưới dạng .png hoặc .jpg | Không thích hợp cho các ứng dụng trò chơi |
| Thích hợp cho các trò chơi tải nhiều đồ họa | Thích hợp cho các ứng dụng có diện tích hiển thị lớn (ví dụ: Google Maps) |
| Tốc độ hiển thị chậm nếu phức tạp (bất kỳ thứ gì sử dụng DOM nhiều sẽ chậm) | Không thích hợp cho các ứng dụng trò chơi |