Đồ họa HTML SVG
SVG (Đồ họa vectơ có thể mở rộng)
SVG định nghĩa đồ họa dựa trên vector trong XML , có thể được nhúng trực tiếp vào các trang HTML.
Đồ họa SVG có thể mở rộng và không làm giảm chất lượng nếu chúng được phóng to hoặc thay đổi kích thước:
SVG được hỗ trợ bởi tất cả các trình duyệt chính.
SVG là gì?
- SVG là viết tắt của Đồ họa vectơ có thể mở rộng
- SVG được sử dụng để xác định đồ họa dựa trên vector cho Web
- SVG định nghĩa đồ họa ở định dạng XML
- Mỗi phần tử và thuộc tính trong tệp SVG đều có thể hoạt hình
- SVG là khuyến nghị của W3C
- SVG tích hợp với các tiêu chuẩn khác, chẳng hạn như CSS, DOM, XSL và JavaScript
Phần tử <svg>
Phần tử HTML <svg>
là nơi chứa đồ họa SVG.
SVG có một số phương pháp để vẽ đường dẫn, hình chữ nhật, hình tròn, đa giác, văn bản, v.v.
Vòng tròn 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" />
</svg>
</body>
</html>
Hãy tự mình thử » Hình chữ nhật SVG
Ví dụ
<svg width="400" height="120">
<rect
x="10" y="10" width="200" height="100"
stroke="red" stroke-width="6" fill="blue"
/>
</svg>
Hãy tự mình thử »Hình chữ nhật SVG có độ mờ và các góc tròn
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>
Hãy tự mình thử »Ngôi sao SVG
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>
Hãy tự mình thử »Văn bản và hình elip chuyển màu SVG
Ví dụ
<svg height="130" width="500">
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="yellow"
/>
<stop offset="100%" stop-color="red" />
</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>
Hãy tự mình thử »Sự khác biệt giữa SVG và Canvas
SVG là ngôn ngữ để mô tả đồ họa 2D bằng XML, trong khi Canvas vẽ đồ họa 2D một cách nhanh chóng (bằng 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 trình xử lý sự kiện JavaScript vào đồ họa SVG.
Trong SVG, mỗi hình 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 hiển thị theo từng pixel. Trong canvas, một khi đồ họa được vẽ, nó sẽ bị trình duyệt lãng quên. Nếu vị trí của nó bị thay đổi, toàn bộ khung cảnh cần phải được vẽ lại, bao gồm mọi đối tượng có thể đã bị đồ họa che phủ.
So sánh SVG và Canvas
Bảng bên dưới cho thấy một số khác biệt quan trọng giữa Canvas và SVG:
SVG | Canvas |
---|---|
|
|
Hướng dẫn SVG
Để tìm hiểu thêm về SVG, vui lòng đọc Hướng dẫn SVG của chúng tôi.