SVG trong HTML5
SVG là gì? SVG là viết tắt của S calable V ector G raphics SVG được sử dụng để vẽ đồ họa trên web SVG là chuẩn chính thức của tổ chức web thế giới W3C SVG rất được giới đồ họa ưu chuộng vì nó không phụ thuộc vào độ phân giải, hình có thể phóng to gấp nhiều lần mà không lo ...
SVG là gì?
- SVG là viết tắt của Scalable Vector Graphics
- SVG được sử dụng để vẽ đồ họa trên web
- SVG là chuẩn chính thức của tổ chức web thế giới W3C
SVG rất được giới đồ họa ưu chuộng vì nó không phụ thuộc vào độ phân giải, hình có thể phóng to gấp nhiều lần mà không lo “vỡ”.
Thẻ SVG
Thẻ <svg> (đã được giới thiệu trong phần HTML5) được sử dụng làm khung bao ngoài cho đồ họa.
SVG có một vài phương thức để vẽ như: đường thẳng, hình hộp, hình tròn, chữ và ảnh.
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thẻ <SVG>:
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| SVG | 4.0 | 3.0 | 9.0 | 3.2 | 10.0 |
Vẽ vòng tròn trong SVG
Rất tiếc, trình duyệt của bạn không hỗ trợ SVG.Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <svg awidth="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-awidth="4" fill="yellow" /> Rất tiếc, trình duyệt của bạn không hỗ trợ SVG. </svg> </body> </html> |
Demo
Vẽ hình chữ nhật trong SVG
Rất tiếc, trình duyệt của bạn không hỗ trợ SVG.Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <svg awidth="400" height="100"> <rect awidth="400" height="100" style="fill:rgb(0,0,255);stroke-awidth:10;stroke:rgb(0,0,0)" /> Rất tiếc, trình duyệt của bạn không hỗ trợ SVG. </svg> </body> </html> |
Demo
Vẽ hình nhữ nhật bo góc trong SVG
Rất tiếc, trình duyệt của bạn không hỗ trợ SVG.Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <svg awidth="400" height="180"> <rect x="50" y="20" rx="20" ry="20" awidth="150" height="150" style="fill:red;stroke:black;stroke-awidth:5;opacity:0.5" /> Rất tiếc, trình duyệt của bạn không hỗ trợ SVG. </svg> </body> </html> |
Demo
Vẽ hình ngôi sao trong SVG
Rất tiếc, trình duyệt của bạn không hỗ trợ SVG.Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <svg awidth="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-awidth:5;fill-rule:evenodd;" /> Rất tiếc, trình duyệt của bạn không hỗ trợ SVG. </svg> </body> </html> |
Demo
Vẽ logo SVG
SVG Rất tiếc, trình duyệt của bạn không hỗ trợ SVG.Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <body> <svg height="130" awidth="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> Rất tiếc, trình duyệt của bạn không hỗ trợ SVG. </svg> </body> </html> |
Demo
Sự khác nhau giữa SVG và Canvas
SVG là một ngôn ngữ để mô tả đồ họa 2D trong XML.
Canvas vẽ đồ họa 2D với JavaScript.
SVG được dựa trên XML nên tất cả các thành phần đều có sẵn trong SVG DOM. Bạn có thể dùng javascript để xử lý các sự kiện trên một thành phần của SVG.
Trong SVG, mỗi hình vẽ được lưu như một đối tượng. Nếu thuộc tính của một đối tượng trong SVG thay đổi, trình duyệt sẽ tự động vẽ lại hình.
Canvas được dựng lên bằng các pixel đứng cạnh nhau. Trong canvas, khi hình đã được dựng lên thì không còn thành phần nào được lưu trong trình duyệt. Nếu muốn thay đổi vị trí của một thành phần, bạn sẽ phải vẽ hình.
So sánh giữa SVG và Canvas
Bảng so sánh dưới đây sẽ cho ta thấy một vài điểm khác biệt quan trọng giữa Canvas và SVG:
| Canvas | SVG |
|---|---|
|
|
