Cafedev chia sẻ về SVG, nó là gì? SVG – Nó định nghĩa đồ họa dựa trên vector theo định dạng XML.
Nội dung chính
1. SVG
- SVG là viết tắt của Đồ họa vectơ có thể mở rộng(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
2. Phần tử <svg>
Phần tử <svg> trong HTML là một thùng chứa cho đồ họa SVG.
SVG có một số phương pháp để vẽ đường, hộp, vòng tròn, văn bản và hình ảnh đồ họa.
3. Browser hỗ trợ nó
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử <svg>.
| Element | Chrome | IE | firefox | safari | opera |
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
4. Vẽ SVG với hình tròn
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<!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> 5. Vẽ hình chữ nhật với SVG
<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>6. Vẽ hình chữ nhật và bo góc
<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>7. SVG Star
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<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>8. SVG Logo
<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>10. Sự khác biệt giữa SVG và Canvas
SVG là ngôn ngữ để mô tả đồ họa 2D bằng XML.
Canvas vẽ đồ họa 2D, 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 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 kết xuất lại hình dạng.
Canvas được hiển thị pixel theo pixel. Trong canvas, một khi đồ họa được vẽ, nó sẽ bị trình duyệt quên lãng. 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ể được bao phủ bởi đồ họa.
Bảng bên dưới cho thấy một số khác biệt quan trọng giữa Canvas và SVG:
| Canvas | SVG |
|---|---|
| – Độ phân giải phải phụ thuộc. – Không hỗ trợ xử lý sự kiện – Khả năng kết xuất văn bản kém – Bạn có thể lưu hình ảnh kết quả là .png hoặc .jpg – Rất thích hợp cho các game chuyên sâu về đồ họa. | – Độ phân giải độc lập – Hỗ trợ xử lý sự kiện – Phù hợp nhất cho các ứng dụng có khu vực kết xuất lớn (Google Maps) – Kết xuất chậm nếu phức tạp (mọi thứ sử dụng DOM nhiều sẽ chậm) – Không phù hợp với các ứng dụng trò chơi |
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
