SVG là gì?

SVG viết tắt của cụm từ Scalable Vector Graphics (tạm dịch: đồ hoạ vector khả mở) và dùng để định nghĩa đồ hoạ trên web theo tiêu chuẩn W3C.

HTML5 hỗ trợ phần tử <svg>  là khung chứa (container) cho đồ hoạ SVG và HTML SVG cũng cung cấp một vài phương thức dùng để vẽ các đường cong (paths), các hình hộp (boxes), văn bản (text), hình tròn (circles), và thêm các hình ảnh.

Thẻ <svg> được hỗ trợ trong các phiên bản trình duyệt (phổ biến nhất) như sau:

Chrome IE/Edge Firefox Safari Opera
<svg> 4.0+ 9.0+ 3.0+ 3.2+ 10.1+

Ưu điểm của ảnh SVG

Ưu điểm của ảnh SVG hơn các ảnh khác (như gif, jpeg,…) là:

  • Hình ảnh SVG có thể được tạo và chỉnh sửa với bất kỳ trình soạn thảo văn bản nào
  • Các hình ảnh SVG có thể được tìm kiếm, lập chỉ mục, viết kịch bản, và nén
  • Hình SVG có thể mở rộng
  • Hình ảnh SVG có thể được in với chất lượng cao ở mọi độ phân giải
  • Hình ảnh SVG có thể phóng to được (và hình ảnh có thể phóng to mà không làm giảm độ phân giải)
  • SVG là một tiêu chuẩn mở
  • Các tệp SVG là XML thuần túy

So sánh SVG và Canvas

SVG Canvas
Là ngôn ngữ mô tả đồ hoạ 2D trong XML. SVG dựa trên XML nên mọi phần tử là hợp lệ với SVG DOM. Chúng ta có thể đính kèm trình xử lý sự kiện cho một phần tử. Vẽ đồ hoạ 2D (với JavaScript)
Mỗi đối tượng đồ hoạ sẽ được ghi nhớ như một đối tượng. Nếu thuộc tính của một đối tượng thay đổi, trình duyệt cũng sẽ tự động thay đổi đối tượng tương ứng. Mỗi đối tượng đồ hoạ được xem như là các pixels nên trình duyệt sẽ không ghi nhớ, vì vậy, nếu có sự thay đổi thì toàn bộ đối tượng đồ hoạ phải được vẽ lại.
Độc lập với độ phân giải Phụ thuộc vào độ phân giải
Hỗ trợ trình xử lý sự kiện (event handler) Không hỗ trợ trình xử lý sự kiện
Không phù hợp cho triển game đồ hoạ Phù hợp cho phát triển game đồ hoạ
Chuyển sang định dạng trên trình duyệt chậm nếu đối tượng đồ hoạ phức tạp Có thể lưu hình ảnh theo định dạng png hay jpg.
Phù hợp với những ứng dụng chuyển những đối tượng lớn (như Google Map) Không phù hợp những ứng dụng như Google Map.

Nhúng phần tử SVG

Với HTML5, chúng ta có thể nhúng trực tiếp phần tử <svg> vào trong trang HTML. Đoạn mã minh hoạ sau nhúng phần tử <svg> dùng để vẽ một đối tượng đường tròn:


<!DOCTYPE html>

<html>

<body>

<h1>My first SVG</h1>

<svg width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

</svg>

</body>

</html>

Kết quả >

Các đối tượng hình học

SVG cung cấp một vài phần tử dùng để vẽ các đối tượng hình học cơ bản gồm:

  • <rect>: vẽ đối tượng hình chữ nhật
  • <circle>: vẽ đối tượng hình chữ nhật
  • <ellipse>: vẽ đối tượng ellipse
  • <line>: vẽ đối tượng đường thẳng
  • <polyline>: vẽ đối tượng gồm nhiều đường thẳng
  • <polygon>: vẽ đối tượng đa giác (ít nhất 3 cạnh)
  • <path>: vẽ đối tượng đường cong
Phần tử <rect>

<rect> dùng để tạo một hình chữ nhật và các biến thể hình chữ nhật.

Xét ví dụ 1:


<!DOCTYPE html>

<html>

<body>

<svg width="400" height="110">

<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />

Trình duyệt không hỗ trợ SVG.

</svg>

</body>

</html>

Đoạn mã trên tạo một hình chữ nhật với width (chiều dài) và height (chiều rộng); thuộc tính style dùng để định nghĩa các thuộc tính CSS cho hình chữ nhật gồm fill (màu nền), stroke-width (độ dày của viền) và stroke (màu viền).

Kết quả >

Xét ví dụ 2:


<!DOCTYPE html>

<html>

<body>

<svg width="400" height="180">

<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />

Trình duyệt không hỗ trợ SVG.

</svg>

</body>

</html>

Đoạn mã trên tạo một hình chữ nhật với width (chiều dài) và height (chiều rộng); thuộc tính x là khoảng cách từ lề bên trái (của khung đồ hoạ tạo bởi SVG), x >= 0 và x <= 400; thuộc tính y là khoảng cách từ lề trên (của khung đồ hoạ tạo bởi SVG), y >= 0 và y <= 180; thuộc tính style dùng để định nghĩa các thuộc tính CSS cho hình chữ nhật gồm fill (màu nền), stroke-width (độ dày của viền), stroke (màu viền), fill-opacity (độ mờ của màu nền), và stroke-opacity (độ mờ của màu viền).

Kết quả >

Xét ví dụ 3:


<!DOCTYPE html>

<html>

<body>

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

Trình duyệt không hỗ trợ SVG.

</svg>

</body>

</html>

Đoạn mã trên tạo một hình chữ nhật với width (chiều dài) và height (chiều rộng); thuộc tính x là khoảng cách từ lề bên trái (của khung đồ hoạ tạo bởi SVG), x >= 0 và x <= 400; thuộc tính y là khoảng cách từ lề trên (của khung đồ hoạ tạo bởi SVG), y >= 0 và y <= 180; thuộc tính rx và ry dùng để làm tròn các góc của hình chữ nhật; thuộc tính style dùng để định nghĩa các thuộc tính CSS cho hình chữ nhật gồm fill (màu nền), stroke-width (độ dày của viền), stroke (màu viền), opacity (độ mờ cho toàn bộ hình chữ nhật (cả khung viền và màu nền)).

Kết quả >

Phần tử <circle>

Dùng để tạo một hình tròn.

Xét đoạn mã tạo hình tròn như sau:


<!DOCTYPE html>

<html>

<body>

<svg height="100" width="100">

<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />

Trình duyệt không hỗ trợ SVG.

</svg>

</body>

</html>

Thuộc tính cx, cy định nghĩa vị trí tâm đường tròn; r là bán kính đường tròn; stroke màu viền của đường tròn; fill màu nền của đường tròn.

Kết quả >

Chú ý nếu bỏ qua cx và cy thì vị trí tâm sẽ là (0, 0). Kết quả trông như sau:

Phần tử <ellipse>

Dùng để tạo một hình ellipse. Hình ellipse gần giống hình tròn nhưng nó có bán kính x và y khác nhau (trong khi hình tròn thì x = y).

Xét đoạn mã tạo hình tròn như sau:


<!DOCTYPE html>

<html>

<body>

<svg height="140" width="500">

<ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />

Trình duyệt không hỗ trợ SVG.

</svg>

</body>

</html>

cx,cy là vị trí tâm ellipse; rx là bán kính lớn, ry là bán kính nhỏ ellipse; thuộc tính style định nghĩa các thuộc tính CSS gồm fill (màu nền), stroke (màu viền), stroke-width (độ dày của viền).

Kết quả >

Phần tử <line>

Dùng để tạo một đường thẳng

Xét đoạn mã sau:


<!DOCTYPE html>

<html>

<body>

<svg height="210" width="500">

<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />

Trình duyệt không hỗ trợ SVG.

</svg>

</body>

</html>

(x1, y1) toạ độ điểm bắt đầu của đường thẳng, (x2, y2) toạ độ điểm kết thúc của đường thẳng; style định nghĩa thuộc tính CSS gồm stroke (màu viền) và stroke-width (độ dày của viền).

Kết quả >

Phần tử <polygon>

Dùng để tạo một hình đa giác (ít nhất 3 cạnh – tam giác).

Xét đoạn mã sau tạo một tam giác


<!DOCTYPE html>

<html>

<body>

<svg height="210" width="500">

<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />

Trình duyệt không hỗ trợ SVG.

</svg>

</body>

</html>

Thuộc tính points định nghĩa toạ độ các đỉnh của tam giác.

Kết quả >

Xét đoạn mã sau tạo một tứ giác


<!DOCTYPE html>

<html>

<body>

<svg height="250" width="500">

<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />

Trình duyệt không hỗ trợ SVG.

</svg>

</body>

</html>

Kết quả >

 

Tạo một ngôi sao 5 cánh:


<!DOCTYPE html>

<html>

<body>

<svg height="210" width="500">

<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>

Trình duyệt không hỗ trợ SVG.

</svg>

</body>

</html>

Kết quả >

Thay đổi giá trị thuộc tính fill-rule đến evenodd, kết quả:

Phần tử <polyline>

Dùng để tạo ra một hình ảnh bất kỳ từ các đoạn thẳng.

Xét đoạn mã sau


<!DOCTYPE html>

<html>

<body>

<svg height="200" width="500">

<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />

Trình duyệt không hỗ trợ SVG.

</svg>

</body>

</html>

Kết quả >

Phần tử <path>

Dùng để định nghĩa một đường cong. Một số quy ước dùng trong <path> như sau:

  • M = moveto (di chuyển đến một vị trí)
  • L = lineto (vẽ đường thằng đến một vị trí )
  • H = horizontal lineto (vẽ đường thằng theo chiều ngang đến một vị trí)
  • V = vertical lineto (vẽ đường thẳng theo chiều thằng đứng đến một vị trí)
  • C = curveto (vẽ đường cong đến một vị trí)
  • S = smooth curveto (vẽ đường cong mượt đến một vị trí)
  • Q = quadratic Bézier curve (vẽ đường cong Bezier bậc hai)
  • T = smooth quadratic Bézier curveto (vẽ đường cong Bezier bậc hai có độ mượt)
  • A = elliptical Arc (vẽ đường cong ellipse)
  • Z = closepath (đường đóng kín)

Các kí hiệu trên có thể dùng kiểu chữ thường. Dùng chỉ in hoa để chỉ vị trí tuyệt đối, chữ thường dùng để chỉ vị trí tương đối.

Ví dụ vẽ đường  bắt đầu tại vị trí (150, 0) và vẽ một đường thẳng đến vị trí (75, 200) và từ vị trí (75, 200) vẽ đường thẳng đến vị trí (225, 200) và từ vị trí (225, 200) trở lại vị trí (150, 0):


<!DOCTYPE html>

<html>

<body>

<svg height="210" width="400">

<path d="M150 0 L75 200 L225 200 Z" />

Trình duyệt không hỗ trợ SVG.

</svg>

</body>

</html>

Kết quả >

Đối tượng văn bản (text)

Dùng phần tử <text> để định nghĩa một văn bản trong SVG.

Ví dụ 1:


<!DOCTYPE html>

<html>

<body>

<svg height="30" width="200">

<text x="0" y="15" fill="red">I love SVG!</text>

Trình duyệt không hỗ trợ SVG.

</svg>

</body>

</html>

Kết quả >

Ví dụ 2:


<!DOCTYPE html>

<html>

<body>

<svg height="60" width="200">

<text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>

Trình duyệt không hỗ trợ SVG.

</svg>

</body>

</html>

Kết quả >

(Tìm hiểu thêm về HTML5 SVG tại https://www.w3schools.com/graphics/svg_intro.asp)

Học HTML & CSS >