Bài 36: Phần tử SVG trong HTML5
SVG là gì?
- SVG là tên viết tắt của Scalable Vector Graphics
- SVG được sử dụng để vẽ giao diện đồ họa trên các trang Web
- SVG là chuẩn chính thức của W3C
Phần tử <svg> trong HTML
Phần tử <svg> trong HTML (đã được giới thiệu trong các bài học về HTML5) là 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, văn bản và hình ảnh đồ họa.
Các trình duyệt hỗ trợ
Dưới đây là bảng giới thiệu các phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ các phần tử <svg>.
| Phần tử |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
Cách vẽ vòng tròn trong SVG
Ví dụ:
<!DOCTYPE html>
<html>
<body><svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow" />
Rất tiếc, trình duyệt của bạn không hỗ trợ SVG.
</svg></body>
</html>
Cách vẽ hình chữ nhật trong SVG
Ví dụ:
<!DOCTYPE html>
<html>
<body><svg width="400" height="100">
<rect width="400" height="100"
style="fill:rgb(0,0,255);stroke-width: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>Cách vẽ hình chữ nhật bo góc trong SVG
Ví dụ
<!DOCTYPE html>
<html>
<body>
<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" />
Rất tiếc, trình duyệt của bạn không hỗ trợ SVG.
</svg>
</body>
</html>
Cách vẽ hình ngôi sao trong SVG
Ví dụ:
<!DOCTYPE html>
<html>
<body><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;" />
Rất tiếc, trình duyệt của bạn không hỗ trợ SVG.
</svg></body>
</html>
Cách vẽ Logo trong SVG
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<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>
Rất tiếc, trình duyệt của bạn không hỗ trợ SVG.
</svg>
</body>
</html>
Điểm 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 xây dựng 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 cho phần tử SVG.
Trong SVG, mỗi hình được vẽ được lưu trữ như một đối tượng. Nếu các thuộc tính của một đối tượng SVG thay đổi, trình duyệt sẽ tự động trả kết quả.
Canvas được hiển thị dưới dạng các pixel đứng cạnh nhau. Trong canvas, khi một hình đã được vẽ, nó sẽ không được nhớ bởi trình duyệt. Nếu vị trí của hình muốn thay đổi thì toàn bộ hình sẽ cần phải vẽ lại bao gồm cả các đối tượng xung quanh đối tượng đồ hoạ này.
So sánh giữa Canvas và SVG
Bảng so sánh dưới đây sẽ chỉ ra cho ta thấy một vài điểm khác biệt quan trọng giữa Canvas và SVG:
| Canvas | SVG |
|---|---|
|
|
