Đồ họa HTML SVG
SVG định nghĩa đồ họa dựa trên vectơ ở định dạng XML.
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
Phần tử <svg> HTML
Phần tử HTML <svg>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.
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ
<svg>phần tử.
| Element | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
Vòng tròn SVG
Thí dụ
<!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>
SVG Rectangle
Thí dụ
<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>
SVG hình chữ nhật tròn
Thí dụ
<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>
SVG Star
Thí dụ
<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>
Biểu trưng SVG
Thí dụ
<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>
Sorry, your browser does not
support inline SVG.
</svg>
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ý sự kiện JavaScript cho một 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 được thay đổi, toàn bộ cảnh cần được vẽ lại, bao gồm bất kỳ đối tượng nào có thể đã bị che bởi đồ họa.
So sánh Canvas và SVG
Bảng dưới đây cho thấy một số khác biệt quan trọng giữa Canvas và SVG:
| Canvas | SVG |
|---|---|
|
|
Hướng dẫn SVG
Để tìm hiểu thêm về SVG, vui lòng đọc Hướng dẫn về SVG của chúng tôi .