Tìm hiểu SVG trong HTML5
SVG là gì? SVG 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> trong HTML Phần tử HTML <svg> là một vùng chứa đồ hoạ SVG. SVG có một số phương pháp để vẽ đường ...
SVG là gì?
- SVG 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> trong HTML
Phần tử HTML <svg> là một vùng chứa đồ hoạ SVG. SVG có một số phương pháp để vẽ đường dẫn, hộp, vòng tròn, văn bản và hình ảnh đồ họa.
Trình duyệt hỗ trợ
Các con số trong bảng xác định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử <svg>.
Vòng tròn SVG
<!DOCTYPE html>
<html>
<body><svg awidth=”100″ height=”100″>
<circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-awidth=”4″ fill=”yellow” />
</svg></body>
</html>
Hình chữ nhật SVG
<svg awidth=”400″ height=”100″>
<rect awidth=”400″ height=”100″ style=”fill:rgb(0,0,255);stroke-awidth:10;stroke:rgb(0,0,0)” />
</svg>
Hình vuông góc tròn SVG
<svg awidth=”400″ height=”180″>
<rect x=”50″ y=”20″ rx=”20″ ry=”20″ awidth=”150″ height=”150″
style=”fill:red;stroke:black;stroke-awidth:5;opacity:0.5″ />
</svg>
Ngôi sao SVG
<svg awidth=”300″ height=”200″>
<polygon points=”100,10 40,198 190,78 10,78 160,198″
style=”fill:lime;stroke:purple;stroke-awidth:5;fill-rule:evenodd;” />
</svg>
Logo SVG
<svg height=”130″ awidth=”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 nhau giữa SVG và Canvas
SVG là một ngôn ngữ để mô tả đồ họa 2D trong XML. Canvas vẽ đồ hoạ 2D, trực tiếp (với JavaScript).
SVG dựa trên XML, có nghĩa là mọi phần tử đều có sẵn trong DOM của SVG. 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 vẽ được nhớ là một đối tượng. Nếu các thuộc tính của một đối tượng SVG được thay đổi, trình duyệt có thể tự động render lại hình dạng.
Canvas được hiển thị pixel theo pixel. Trên canvas, một khi đồ họa được vẽ, nó sẽ bị lãng quên bởi trình duyệt. Nếu vị trí của nó cần đượ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 đồ hoạ.
| Canvas | SVG |
|---|---|
| Phụ thuộc độ phân giải | Độc lập về độ phân giải |
| Không hỗ trợ xử lý sự kiện | Hỗ trợ cho các trình xử lý sự kiện |
| Khả năng dựng hình văn bản kém | Thích hợp nhất cho các ứng dụng với các khu vực dựng hình lớn (Google Maps) |
| Lưu hình ảnh kết quả dưới dạng .png hoặc .jpg | Rendering chậm nếu phức tạp (bất cứ thứ gì sử dụng DOM rất nhiều sẽ chậm) |
| Thích hợp cho các trò chơi đồ họa chuyên sâu | Không phù hợp với các ứng dụng trò chơi |
- Học lập trình front-end cơ bản với bootstrap 4/html5/css3
- Học lập trình front-end nâng cao qua Project thực tế
- Học thiết kế web với Photoshop, CSS theo kiểu SASS
- Học cách sử dụng Git_hub cho lập trình viên
- Học lập trình Back-end PHP theo mô hình MVC cơ bản
- Học lập trình Back-end PHP theo mô hình MVC nâng cao
- Học lập trình Cơ sở dữ liệu với AngularJS
- Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
- Combo lập trình front-end từ cơ bản – nâng cao
- Combo lập trình back-end từ cơ bản đến nâng cao
- Combo lập trình web với word press từ A-Z
