Phần tử SVG trong HTML5

MOD

Ở bài học trước, Quantrimang đã cùng bạn tìm hiểu về phần tử Canvas trong HTML5 dùng để vẽ đồ họa cho website. Hôm nay chúng mình xin giới thiệu thêm một phần tử nữa có nhiệm vụ tương tự, cũng được sử dụng để vẽ đồ họa 2D và các ứng dụng đồ họa trên website, đó là phần tử SVG. Vậy SVG có những nội dung gì, cách sử dụng ra sao, điểm khác biệt của nó và Canvas là như thế nào? Bạn hãy cùng Quantrimang tìm hiểu qua bài viết này nhé.

SVG là gì?

SVG là viết tắt của Scalable Vector Graphics, là một định dạng hình ảnh (tương tự như JPG, PNG,... mà chúng ta vẫn thường dùng).

SVG được sử dụng để vẽ đồ họa 2D và các ứng dụng đồ họa trên website, phần lớn hữu ích cho các sơ đồ kiểu vecto như các biểu đồ Pie, các đồ thị hai chiều trong hệ tọa độ X, Y

SVG là chuẩn chính thức của tổ chức web thế giới W3C.

Ưu điểm

Hình ảnh SVG có thể phóng to nhưng không vỡ ảnh.
Hình ảnh SVG có thể được in với chất lượng cao ở bất kỳ độ phân giải nào.
Hình ảnh SVG có thể được tạo và chỉnh sửa bằng javascript.
Hình ảnh SVG có thể tìm kiếm, đánh chỉ mục, nén,…
Hình ảnh SVG có thể chuyển động sử dụng các thành phần animation đã xây dựng sẵn.
Hình ảnh SVG có thể chứa liên kết đến bất kỳ tài liệu nào khác.
SVG hầu như được hỗ trợ trên tất cả các trình duyệt.

Phần tử <svg> trong HTML

Phần tử <svg> trong HTML một vùng chứa để vẽ đồ họa.

SVG có một vài phương thức để vẽ như: đường thẳng, hình hộp, hình tròn, văn bản và hình ảnh đồ họa...

Vẽ đường tròn SVG

Để vẽ đường tròn ta dùng thẻ <circle>

<!DOCTYPE html>
<html>
<body>

<h2>Vẽ đường tròn trong SVG HTML5</h2>
<svg width="300" height="300">
<circle cx="200" cy="100" r="80"
stroke="lightcoral" stroke-width="4" fill="moccasin" />
</svg>

</body>
</html>

Các thuộc tính trong <circle> là:

cx: vị trí tâm, tính từ mép trái của SVG.
cy: vị trí tâm, tính từ mép trên.
r: bán kính.
fill: xác định màu tô.
stroke: đường biên.

Kết quả:

Vẽ hình ellipse SVG

Để vẽ hình ellipse ta sử dụng thẻ <ellipse>.

<!DOCTYPE html>
<html>
<body>

<h2>Vẽ hình ellipse trong SVG HTML5</h2>
<svg width="300" height="300">
<ellipse cx="150" cy="70" rx="100" ry="50"
stroke="darkslateblue" stroke-width="4" fill="lightblue" />
</svg>

</body>
</html>

Các tham số tương tự khi vẽ hình tròn, thêm hai thuộc tính:

rx: bán kính từ tâm đến mép bên trái.
ry: bán kính từ tâm đến mép phía trên.

Kết quả:
Hình ellipse SVG

Vẽ hình chữ nhật SVG

Bạn sử dụng thẻ <rect> để vẽ hình chữ nhật.

<!DOCTYPE html>
<html>
<body>

<h2>Vẽ hình chữ nhật trong SVG HTML5</h2>
<svg width="400" height="100">
<rect width="400" height="100"
style="fill:lightcoral;stroke-width:10;stroke:pink" />
</svg>

</body>
</html>

Kết quả:

Hình chữ nhật SVG

Vẽ hình chữ nhật bo góc SVG

Sử dụng thẻ <rect> để vẽ.

<!DOCTYPE html>
<html>
<body>

<h2>Vẽ hình chữ nhật bo góc trong SVG HTML5</h2>
<svg width="400" height="180">
<rect x="150" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

</body>
</html>

Kết quả:

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

Vẽ đoạn thẳng SVG

Dùng <line> để vẽ các đoạn thẳng:

<!DOCTYPE html>
<html>
<body>

<h2>Vẽ đoạn thẳng trong SVG HTML5</h2>
<svg width="400" height="180">
<line x1="50" y1="20" x2="300" y2="100" style="stroke:palevioletred;stroke-width:5"/>
</svg>

</body>
</html

Kết quả:

Đoạn thẳng SVG

Vẽ các đường gấp khúc SVG

Dùng <polyline> để vẽ đường gấp khúc, trong đó thuộc tính points theo tứ tự chỉ ra các tọa độ x,y của các điểm cần nối lại với nhau:

<!DOCTYPE html>
<html>
<body>

<h2>Vẽ đường gấp khúc trong SVG HTML5</h2>
<svg width="300" height="300">
<polyline points="10,10 80,10 80,80 150,80 150,150 220,150 220,220"
fill="pink" stroke="palevioletred" stroke-width="5" />
</svg>

</body>
</html>

Kết quả:

Đường gấp khúc SVG

Vẽ hình ngôi sao trong SVG

Ta sử dụng thẻ <polygon>, trong đó points xác định tọa độ x,y của các đỉnh.

<polygon> dùng để vẽ một hình đóng (closed shape) bao gồm những đoạn thẳng. Điểm cuối sẽ kết nối với điểm đầu.

<!DOCTYPE html>
<html>
<body>

<h2>Vẽ hình ngôi sao trong SVG HTML5</h2>
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lemonchiffon;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

Hình ngôi sao SVG

Ngoài ra, <polygon> còn được sử dụng để vẽ các hình đa giác khác.

Vẽ các hình phức tạp SVG

Sử dụng <path> để vẽ các hình phức tạp, đường dẫn để vẽ được định nghĩa trong thuộc tính d="cách - lệnh vẽ"

Các lệnh sử dụng trong thuộc tính d là:

M : di chuyển điểm vẽ đến tọa độ x, y (M x y).
L : vẽ từ điểm hiện tại đến điểm x, y (L x y).
H : vẽ đường ngang từ điểm hiện tại đến điểm có tọa độ x (H x).
V : vẽ đường thẳng đứng đến điểm có tọa độ y (V y).
C : vẽ đường cong cubic-bezier từ điểm hiện tại x0, y0 đến điểm x, y. điểm đầu đường cong tiếp tuyến với đường thẳng x0,y0, x1, y1 điểm thứ 2 của đường cong tiếp tuyến với tường x,y, x2, y2 C x1 y1, x2 y2, x, y.
S : vẽ đường cong trơn từ điểm hiện tại x0, y0 đến điểm x, y trong đó điểm đầu tiếp tuyến với đường x0,y0, x2, y2 S x2 y2, x y.
Q : vẽ đường cong cubic-bezier từ điểm hiện tại x0, y0 đến điểm x, y. điểm đầu đường cong tiếp tuyến với đường thẳng x0,y0, x1, y1 điểm thứ 2 của đường cong tiếp tuyến với tường x,y, x1, y1 C x1 y1, x y.
T : vẽ đường cong cubic-bezier, từ điểm hiện tại đến điểm x,y (T x y).
A : vẽ cung tròn.
Z : đóng đường vẽ.

<!DOCTYPE html>
<html>
<body>

<h2> Vẽ các hình phức tạp SVG </h2>
<svg width="250" height="250">
<path d="M 10 10 C 200 10, 10 200, 200 200"
style="stroke:crimson;stroke-width:3; fill:lightpink" />
</svg>

</body>
</html>

Kết quả:

Chèn chữ vào SVG

Để thêm chữ vào SVG bắt đầu tại tọa độ (x,y) thì sử dụng <text>.

<text> có các thuộc tính: font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing, text-decoration.

<!DOCTYPE html>
<html>
<body>

<h2>Chèn chữ vào SVG</h2>
<svg width="450" height="180">
<rect x="50" y="20" rx="20" ry="20" width="350" height="150"
style="fill:purple;stroke:indigo;stroke-width:5;" />
<text fill="#ffffff" font-size="35" font-family="Verdana" x="70" y="100">QuanTriMang.com</text>
</svg>

</body>
</html>

Vẽ hình SVG đổ màu Gradient

Bạn có thể sử dụng thẻ <radialGradient> hoặc <linearGradient> để định nghĩa một SVG Gradient.

<!DOCTYPE html>
<html>
<body>

<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#ff9999;stop-opacity:1" />
<stop offset="100%" style="stop-color:#9933ff;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">QTM</text>
</svg>

</body>
</html>

Điểm khác nhau giữa SVG và Canvas

Bảng so sánh dưới đây sẽ chỉ ra cho ta thấy một vài điểm khác biệt quan trọng giữa Canvas và SVG:

CANVAS

SVG

Canvas vẽ đồ họa 2D với JavaScript.
Canvas được hiển thị dưới dạng các pixel đứng cạnh nhau.
Trong canvas, khi một hình đã được vẽ, nó sẽ không được nhớ bởi trình duyệt. Nếu vị trí của hình muốn thay đổi thì toàn bộ hình sẽ cần phải vẽ lại bao gồm cả các đối tượng xung quanh đối tượng đồ hoạ này.
Phụ thuộc vào độ phân giải
Không hỗ trợ trong việc xử lí các sự kiện
Khả năng tạo hình cho văn bản không tốt
Bạn có thể lưu hình sau khi vẽ dưới dạng .png hoặc .jpg
Rất thích hợp cho các game đồ họa

SVG mô tả đồ họa 2D trong XML
SVG được xây dựng dựa trên XML nên tất cả các thành phần đều có sẵn trong SVG DOM. Bạn có thể dùng javascript để xử lý các sự kiện trên cho phần tử SVG.
Trong SVG, mỗi hình được vẽ được lưu trữ như một đối tượng. Nếu các thuộc tính của một đối tượng SVG thay đổi, trình duyệt sẽ tự động trả kết quả.
Không phụ thuộc vào độ phân giải
Hỗ trợ trong việc xử lí các sự kiện
Phù hợp với các ứng dụng xây dựng hình ảnh rộng (Google Maps)
Xây dựng hình ảnh chậm nếu đồ họa phức tạp (Tất cả những gì sử dụng nhiều DOM đều bị chậm)
Không phù hợp với các ứng dụng game

Được rồi, vậy là chúng ta đã học xong cả hai cách vẽ đồ họa trong HTML5 là sử dụng <canvas> và <svg>. Mong rằng bài học sẽ hữu ích cho bạn. Hãy cùng đón chờ những bài học tiếp theo cùng Quantrimang nhé.

Chúc bạn thiết kế được một website thật hoàn hảo!

Xem thêm:

Bài trước: Phần tử Canvas trong HTML5

Bài tiếp: Các định dạng Đa phương tiện - Multimedia trong HTML5

Thứ Ba, 04/12/2018 14:34

5 ★ 7 👨 4.572