Đồ họa SVG trong HTML - HTML SVG Graphics

  • Huân

    Tác giả

    Huân

  • Ngày đăng

    26 thg 10, 2023

  • Số lượt xem

    212 lượt xem


Hướng dẫn chi tiết về cách sử dụng Scalable Vector Graphics (SVG) trong HTML. Cách vẽ vector, màu sắc và độ phân giải phù hợp với tất cả các loại màn hình

SVG định nghĩa đồ họa dựa trên vector dưới dạng định dạng XML.

SVG là gì?

SVG viết tắt của Scalable Vector Graphics (Đồ họa Vector có thể tỉ lệ).

SVG được sử dụng để xác định đồ họa cho Web.

SVG là một đề xuất của W3C (World Wide Web Consortium).

Thẻ HTML <svg>

Thẻ HTML <svg> là một bộ chứa cho đồ họa SVG.

SVG có một số phương pháp để vẽ các đường dẫn, hình chữ nhật, hình tròn, văn bản và hình ảnh đồ họa.

Hỗ trợ trình duyệt

Các con số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn phần tử <svg>.

Phần tử Chrome Firefox IE Opera Safari

<svg> 4.0 9.0 3.0 3.2 10.1

Hình tròn trong SVG

Ví dụ về Hình tròn trong SVG

<!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ình chữ nhật trong SVG

Ví dụ về Hình chữ nhật trong 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>

Hình chữ nhật bo góc trong SVG

Ví dụ về Hình chữ nhật bo góc trong SVG

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

Ngôi sao trong SVG

Ví dụ về Sao trong SVG

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

Logo trong SVG

Ví dụ về Logo SVG

<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>
  Xin lỗi, trình duyệt của bạn không hỗ trợ SVG nội tuyến.
</svg>

Sự khác biệt giữa SVG và Canvas

SVG là một ngôn ngữ để mô tả đồ họa 2D trong định dạng XML.

Canvas vẽ đồ họa 2D, ngay lập tức (bằng JavaScript).

SVG dựa trên XML, điều này có nghĩa là mọi phần tử đều có sẵn trong DOM SVG. Bạn có thể gắn các bộ xử lý sự kiện JavaScript cho một phần tử.

Trong SVG, mỗi hình vẽ được nhớ như một đối tượng. Nếu thuộc tính của một đối tượng SVG bị thay đổi, trình duyệt có thể vẽ lại hình tự động.

Canvas được vẽ từng pixel một. Trong canvas, khi đồ họa đã được vẽ, nó sẽ bị quên bởi trình duyệt. Nếu vị trí của nó phải thay đổi, toàn bộ cảnh phải được vẽ lại, bao gồm bất kỳ đối tượng nào có thể đã bị che phủ bởi hình ảnh.

So sánh giữa Canvas và SVG

Bảng dưới đây cho thấy một số sự khác biệt quan trọng giữa Canvas và SVG:

Canvas

SVG

Phụ thuộc vào độ phân giải

Độc lập với độ phân giải

Không hỗ trợ bộ xử lý sự kiện

Hỗ trợ bộ xử lý sự kiện

Khả năng hiển thị văn bản kém

Khả năng hiển thị văn bản tốt

Bạn có thể lưu hình ảnh kết quả dưới dạng .png hoặc .jpg

Không thích hợp cho các ứng dụng trò chơi

Thích hợp cho các trò chơi tải nhiều đồ họa

Thích hợp cho các ứng dụng có diện tích hiển thị lớn (ví dụ: Google Maps)

Tốc độ hiển thị chậm nếu phức tạp (bất kỳ thứ gì sử dụng DOM nhiều sẽ chậm)

Không thích hợp cho các ứng dụng trò chơi

 


Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về HTML

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.