HTML5 SVG
Trong hướng dẫn này, bạn sẽ học cách sử dụng phần tử HTML5 SVG để vẽ đồ họa vector trên trang web.
SVG là gì?
Scalable Vector Graphics (SVG) - Đồ họa Vectơ có thể mở rộng là một định dạng hình ảnh dựa trên XML được sử dụng để xác định đồ họa dựa trên vectơ hai chiều cho web. Không giống như hình ảnh raster (ví dụ:, .jpgv.v. .gif) .png, hình ảnh vectơ có thể được phóng to hoặc thu nhỏ ở bất kỳ mức độ nào mà không làm giảm chất lượng hình ảnh.
Ghi chú: Raster: Là hình ảnh được tạo bởi những điểm ảnh. Nó được thể hiện bằng những chấm vuông trên ảnh. Mỗi chấm vuông mang một sắc độ màu sắc khác nhau
Hình ảnh SVG được vẽ ra bằng cách sử dụng một loạt câu lệnh tuân theo lược đồ XML - điều đó có nghĩa là hình ảnh SVG có thể được tạo và chỉnh sửa bằng bất kỳ trình soạn thảo văn bản nào, chẳng hạn như Notepad. Có một số lợi thế khác của việc sử dụng SVG so với các định dạng hình ảnh khác như JPEG, GIF, PNG, v.v.
- Hình ảnh SVG có thể được tìm kiếm, lập chỉ mục, tập lệnh và nén.
- Hình ảnh SVG có thể được tạo và sửa đổi bằng JavaScript trong thời gian thực.
- Hình ảnh SVG có thể được in với chất lượng cao ở bất kỳ độ phân giải nào.
- Nội dung SVG có thể được làm động bằng cách sử dụng các yếu tố hoạt hình tích hợp sẵn.
- Hình ảnh SVG có thể chứa các siêu liên kết đến các tài liệu khác.
Mẹo: Hình ảnh vectơ bao gồm một tập hợp cố định của các hình dạng được xác định bởi toán học, trong khi hình ảnh bitmap hoặc raster bao gồm một tập hợp các điểm cố định được gọi là pixel.
Nhúng SVG vào các trang HTML
Bạn có thể nhúng trực tiếp đồ họa SVG vào tài liệu của mình bằng cách sử dụng phần tử <svg> của HTML5.
Hãy xem ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:
Thí dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Embedding SVG in HTML</title>
</head>
<body>
<svg width="300" height="200">
<text x="10" y="20" style="font-size:14px;">
Your browser support SVG.
</text>
Sorry, your browser does not support SVG.
</svg>
</body>
</html>Lưu ý: Tất cả các trình duyệt web hiện đại chính như Chrome, Firefox, Safari và Opera, cũng như Internet Explorer 9 trở lên đều hỗ trợ hiển thị SVG nội tuyến.
Vẽ đường dẫn và hình dạng với SVG
Phần sau đây sẽ giải thích cho bạn cách vẽ các đường dẫn và hình dạng dựa trên vectơ cơ bản trên các trang web bằng cách sử dụng phần tử HTML5 <svg> mới được giới thiệu.
Vẽ một đường
Đường cơ bản nhất mà bạn có thể vẽ bằng SVG là một đường thẳng. Ví dụ sau sẽ chỉ cho bạn cách tạo một đường thẳng bằng cách sử dụng phần tử SVG <line>:
Thí dụ
<svg width="300" height="200">
<line x1="50" y1="50" x2="250" y2="150" style="stroke:red; stroke-width:3;" />
</svg>Các thuộc tính x1và x2 của phần tử vẽ một đường thẳng từ đến .y1y2<line>(x1,y1)(x2,y2)
Vẽ hình chữ nhật
Bạn có thể tạo hình chữ nhật và hình vuông đơn giản bằng cách sử dụng phần tử SVG <rect>. Ví dụ sau sẽ chỉ cho bạn cách tạo và tạo kiểu cho một hình chữ nhật với SVG:
Thí dụ
<svg width="300" height="200">
<rect x="50" y="50" width="200" height="100" style="fill:orange; stroke:black; stroke-width:3;" />
</svg>Các thuộc tính xvà ycủa <rect>phần tử xác định tọa độ của góc trên cùng bên trái của hình chữ nhật. Các thuộc tính widthvà heightchỉ định chiều rộng và chiều cao của hình dạng.
Vẽ một vòng tròn
Bạn cũng có thể tạo các hình dạng vòng tròn bằng cách sử dụng phần tử SVG <circle>. Ví dụ sau đây sẽ chỉ cho bạn cách tạo và tạo kiểu cho một hình tròn với SVG:
Thí dụ
<svg width="300" height="200">
<circle cx="150" cy="100" r="70" style="fill:lime; stroke:black; stroke-width:3;" />
</svg>Các thuộc tính cxvà cycủa phần tử <circle> xác định tọa độ của tâm hình tròn và thuộc tính rxác định bán kính của hình tròn. Tuy nhiên, nếu các thuộc tính cxvà cybị bỏ qua hoặc không được chỉ định, thì tâm của vòng tròn được đặt thành (0,0).
Vẽ văn bản bằng SVG
Bạn cũng có thể vẽ văn bản trên các trang web bằng SVG. Văn bản trong SVG được hiển thị dưới dạng đồ họa nên bạn có thể áp dụng tất cả các chuyển đổi đồ họa cho nó nhưng nó vẫn hoạt động giống như văn bản - điều đó có nghĩa là người dùng có thể chọn và sao chép nó dưới dạng văn bản. Hãy thử một ví dụ để xem cách này hoạt động như thế nào:
Thí dụ
<svg width="300" height="200">
<text x="20" y="30" style="fill:purple; font-size:22px;">
Welcome to Our Website!
</text>
<text x="20" y="30" dx="0" dy="20" style="fill:navy; font-size:14px;">
Here you will find lots of useful information.
</text>
</svg>Các thuộc tính xvà ycủa phần tử <text> xác định vị trí của góc trên cùng bên trái theo nghĩa tuyệt đối trong khi các thuộc tính dxvà dychỉ định vị trí tương đối.
Bạn thậm chí có thể sử dụng phần tử <tspan> để định dạng lại hoặc định vị lại khoảng văn bản có trong phần tử <text>. Văn bản được chứa trong các tspans riêng biệt, nhưng bên trong cùng một phần tử văn bản, tất cả đều có thể được chọn cùng một lúc - khi bạn nhấp và kéo để chọn văn bản. Tuy nhiên, văn bản trong các phần tử văn bản riêng biệt không thể được chọn cùng một lúc. Hãy xem một ví dụ:
Thí dụ
<svg width="300" height="200">
<text x="30" y="15" style="fill:purple; font-size:22px; transform:rotate(30deg);">
<tspan style="fill:purple; font-size:22px;">
Welcome to Our Website!
</tspan>
<tspan dx="-230" dy="20" style="fill:navy; font-size:14px;">
Here you will find lots of useful information.
</tspan>
</text>
</svg>Sự khác biệt giữa SVG và Canvas
HTML5 đã giới thiệu hai phần tử đồ họa mới <canvas>và <svg>để tạo đồ họa phong phú trên web, nhưng chúng khác nhau về cơ bản.
Bảng sau đây tóm tắt một số khác biệt cơ bản giữa hai yếu tố này, sẽ giúp bạn hiểu cách sử dụng các yếu tố này một cách hiệu quả và phù hợp.
| SVG | Tranh sơn dầu |
|---|---|
| Dựa trên vectơ (bao gồm các hình dạng) | Dựa trên Raster (bao gồm pixel) |
| Nhiều phần tử đồ họa, trở thành một phần của cây DOM của trang | Yếu tố đơn lẻ tương tự như <img>trong hành vi. Sơ đồ canvas có thể được lưu thành định dạng PNG hoặc JPG |
| Được sửa đổi thông qua tập lệnh và CSS | Chỉ được sửa đổi thông qua tập lệnh |
| Khả năng kết xuất văn bản tốt | Khả năng kết xuất văn bản kém |
| Mang lại hiệu suất tốt hơn với số lượng vật thể nhỏ hơn hoặc bề mặt lớn hơn hoặc cả hai | Mang lại hiệu suất tốt hơn với số lượng đối tượng lớn hơn hoặc bề mặt nhỏ hơn hoặc cả hai |
| Khả năng mở rộng tốt hơn. Có thể được in với chất lượng cao ở bất kỳ độ phân giải nào. Pixelation không xảy ra | Khả năng mở rộng kém. Không thích hợp để in trên độ phân giải cao hơn. Pixelation có thể xảy ra |
Ghi chú: Pixelation là một thuật ngữ được sử dụng trong đồ họa máy tính để mô tả phần mờ hoặc mờ trong một hình ảnh do tầm nhìn của các yếu tố hiển thị hình vuông đơn màu hoặc pixel riêng lẻ.