Đồ Họa SVG Trong HTML (HTML SVG Graphics) | Lập Trình Từ Đầu

Trang chủ » Thẻ Svg Trong Html » Đồ Họa SVG Trong HTML (HTML SVG Graphics) | Lập Trình Từ Đầu

Có thể bạn quan tâm

1. 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

2. Phần tử <svg> trong HTML

Phần tử <svg> trong HTML 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

Các trình duyệt hỗ trợ phần tử <svg>

Tình duyệt Biểu tượng máy tính Google Chrome Trình duyệt web, Chrome OS, trái bóng, hệ điều hành chrome png | PNGEgg Đây là logo mới của trình duyệt Microsoft Edge dựa trên Chromium | Tinh tế Cận cảnh loài vật biểu tượng của trình duyệt FireFox ngoài đời thực Tại sao bạn nên sử dụng Safari thay vì Chrome trên MacBook? Có vấn đề về trình duyệt? Chúng tôi có thể giúp bạn! | Trợ giúp &amp; FAQ | Opera
<canvas> 4.0 9.0 3.0 3.2 10.1
3. Một số ví dụ về <svg> trong HTML

3.1 Vẽ vòng tròng bằng SVG

Ví dụ:

3.2  Vẽ hình chữ nhật bằng SVG

Ví dụ:

Bạn cũng có thể vẽ hình chữ nhật có cạnh vát tròn bằng cách sau:

3.3 Vẽ hình ngôi sao bằng SVG

Ví dụ:

3.4 Tạo biểu tượng bằng SVG

Ví dụ:

4. 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ý JavaScript cho 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 thay đổi, toàn bộ phải được vẽ lại, bao gồm bất kỳ đối tượng nào có thể đã bị che bởi đồ họa

Canvans SVG
  • Độ phân giải phụ thuộc
  • Không hỗ trợ cho người chỉnh sửa
  • 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ả dưới dạng .png hoặc .jpg
  • Rất thích hợp cho các trò chơi đồ họa chuyên sâu
  • Độ phân giải độc lập
  • Hỗ trợ cho người chỉnh sửa
  • Phù hợp nhất cho các ứng dụng có khu vực hiển thị lớn (Google Maps)
  • Kết xuất chậm nếu phức tạp (bất kỳ thứ gì sử dụng DOM nhiều sẽ chậm)
  • Không phù hợp với các ứng dụng trò chơi

Từ khóa » Thẻ Svg Trong Html