đồ 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ây dựng đồ họa cho Website
- SVG là một khuyến nghị của W3C
Phần tử HTML <svg>
Phần tử HTML <svg> là vùng chứa đồ họa SVG.
SVG có một số phương pháp để vẽ đường thẳng, hộp, hình tròn, văn bản và hình ảnh đồ họa.
Trình duyệt hỗ trợ
Các số trong bảng bên dưới chỉ định phiên bản tối thiểu trình duyệt hỗ trợ đầy đủ cho phần tử HTML <svg>.
| Phần tử | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
Vòng tròn SVG
Ví dụ
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>
Hình chữ nhật SVG
Ví 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>
Hình chữ nhật góc tròn SVG
Ví 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
Ví 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 tượng SVG
Ví 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> </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. Chúng ta 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 ban đầu.
Canvas được kết xuất từng pixel một. Trong canvas, một khi đồ họa được vẽ xong, nó sẽ bị trình duyệt xóa. 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.