-----
1.1.1
Ảnh SVG
Ở phần trên, chúng ta đã chèn ảnh kiểu bitmap (ví dụ GIF,
JPEG, PNG) vào trang web. Với ảnh kiểu bitmap, trình duyệt chỉ việc tải ảnh từ
server về và hiển thị. Phần này, chúng ta sẽ tìm hiểu cách chèn một kiểu định dạng
khác của hình ảnh. Đó là ảnh kiểu SVG.
Ảnh SVG (Scalable Vector Graphics) là ảnh có định dạng kiểu
vector (công thức toán học), nghĩa là các hình khối, đường nét không phải là
các điểm ảnh trên lưới (grid of pixels), mà nó ở dạng mô tả bằng toán học. Các
định nghĩa này được viết dưới dạng văn bản (text).
Người ta sử dụng ngôn ngữ đánh dấu, theo chuẩn SVG để tạo ra
hình ảnh. Như trong HTML, để tạo ra đoạn có phần tử p, tạo bảng có phần tử table;
với SVG cũng có các phần tử tương tự, để tạo hình chữ nhật có phần tử rect, tạo hình tròn có phần tử circle, tạo đường nét có phần tử path.
Với ảnh SVG, trình duyệt sẽ dựa trên mô tả của ảnh để “vẽ” lại.
Do vậy, nếu trình duyệt không hỗ trợ, tức là nó không có thành phần thực thi
các khai báo SVG, thì chúng ta sẽ không có hình ảnh trên giao diện. Cũng dễ nhận
thấy là việc tải ảnh SVG từ server về trình duyệt sẽ nhanh hơn, do nó chỉ là
văn bản. Nhưng việc hiển thị ảnh thì sẽ mất thời gian và tài nguyên của máy người
dùng do quá trình “vẽ” ảnh.
Chúng ta sẽ cùng làm một ví dụ đơn giản, sử dụng trình duyệt
để vẽ một hình chữ nhật, nền đen, và chữ “bác Tèo” màu trắng. Bạn chép đoạn mã
này vào tập tin .html và xem kết quả bằng trình duyệt,
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60">
<rect width="200" height="60" fill="black" rx="20" ry="20" />
<text x="10" y="40" fill="white" font-family="arial" font-size="16">
bác Tèo
</text>
</svg>
Giải thích đoạn mã trên:
– Phần tử svg dùng
để tạo ra một ảnh SVG, thuộc tính xmlns
cho biết phần tử svg và các phần tử
con của nó sẽ thuộc namespace nào.
– Phần tử rect
(rectangle) là con của svg, dùng để tạo
hình chữ nhật, được bo góc bằng hai thuộc tính (rx: x-radius, ry: y-radius)
– Phần tử text là
con của svg, chứa nội dung văn bản,
cùng với các thuộc tính định dạng văn bản
Ảnh SVG cũng có dạng hoạt hình (animated), bạn cũng có thể định
dạng ảnh SVG bằng CSS và lập trình tương tác với ảnh bằng JavaScript.
Nhược điểm của ảnh SVG là tính tương thích với các trình duyệt
chưa được rộng rãi, bị giới hạn về độ chi tiết và màu sắc.
Thêm ảnh SVG cho
trang web
Để thêm ảnh SVG vào trang web, chúng ta có một số cách sau:
– Sử dụng phần tử img
– Sử dụng phần tử svg
– Sử dụng một object
– Sử dụng CSS
Sử dụng phần tử img
Tập tin ảnh SVG có phần mở rộng là .svg. Chúng ta có thể xem
nó như là các tập tin hình ảnh dạng PNG, JPEG hay GIF. Do vậy, bạn có thể sử dụng
phần tử img để chèn ảnh SVG cho trang web. Ví dụ: vào google, gõ từ khóa “rose
SVG”, tải một tập tin bất kì về máy (rose.svg). Mở tập tin rose.svg bằng chương
trình soạn thảo mã nguồn bất kì (ví dụ notepad) để xem nội dung của tập tin
rose.svg.
[rose.svg]
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG
Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
id="Capa_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="491.279px" height="491.279px" viewBox="0 0 491.279 491.279" style="enable-background:new 0 0 491.279 491.279;"
xml:space="preserve">
...
Nhập đoạn mã sau để xem kết quả.
<img src="rose.svg" alt="">
Ưu điểm của việc sử dụng img
để thêm một ảnh SVG là được nhiều trình duyệt hỗ trợ. Tuy nhiên, nó cũng có
một số hạn chế khi bạn muốn định dạng và xử lý các phần tử bên trong SVG bằng
CSS và JavaScript. Ví dụ, bạn chỉ có thể định dạng các phần tử con của svg bằng
phần tử style trong chính tập tin .svg, chứ không thể định dạng bằng các luật
CSS trong tập tin .css của toàn trang web.
Cách thêm ảnh SVG bằng phần tử img thích hợp trong trường hợp
chúng ta chỉ muốn chèn một ảnh minh họa, một ảnh tĩnh mà không cần phải có hiệu
ứng hay tương tác, như logo, biểu tượng (icon).
Sử dụng phần tử svg
Đây là cách thứ 2 để thêm một ảnh SVG vào trang web.
Chúng ta sẽ sử dụng phần tử svg để nhúng trực tiếp các khai
báo tạo ảnh SVG trong mã nguồn HTML, gọi là chèn ảnh SVG kiểu inline. Thực chất
là đem nội dung của một tập tin .svg, chèn trực tiếp vào tài liệu HTML. Như ở
phần trên, chúng ta cũng đã chèn một hình chữ nhật và chữ “bác Tèo” theo cách
này.
Phần này chúng ta sẽ tạo ra hình ảnh của một cái bánh pizza
bằng các khai báo của SVG.
<p>bác Tèo nướng bánh Pizza:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" width="100"
height="100">
<circle fill="#D4AB00" cx="36" cy="36" r="36"/>
<circle opacity=".7" fill="#FFF" stroke="#8A291C" cx="36.1" cy="35.9"
r="31.2"/>
<circle fill="#A52C1B" cx="38.8" cy="13.5" r="4.8"/>
<circle fill="#A52C1B" cx="22.4" cy="20.9" r="4.8"/>
<circle fill="#A52C1B" cx="32" cy="37.2" r="4.8"/>
<circle fill="#A52C1B" cx="16.6" cy="39.9" r="4.8"/>
<circle fill="#A52C1B" cx="26.2" cy="53.3" r="4.8"/>
<circle fill="#A52C1B" cx="42.5" cy="27.3" r="4.8"/>
<circle fill="#A52C1B" cx="44.3" cy="55.2" r="4.8"/>
<circle fill="#A52C1B" cx="54.7" cy="42.9" r="4.8"/>
<circle fill="#A52C1B" cx="56" cy="28.3" r="4.8"/>
</svg>
mlem mlem.</p>
Chèn ảnh SVG theo cách này có ưu điểm là bạn có thể định dạng
các phần tử con của svg bằng CSS kiểu external và lập trình tương tác bằng
JavaScript. Lý do là trình duyệt sẽ coi các phần tử con của svg cũng là một
thành phần của cây DOM như các phần tử HTML khác.
Hạn chế của phương pháp này là làm cho tài liệu HTML phình lớn,
phức tạp và khó đọc. Như trên chúng ta đã thấy, chỉ hiển thị hình một cái bánh
pizza, nhưng mã nguồn khá nhiều và phức tạp. Chèn ảnh SVG theo kiểu này cũng
không tận dụng được cơ chế “cache ảnh” của trình duyệt.
Sử dụng một object
Objet là đối tượng đa năng của HTML, chúng ta có thể sử dụng nó để nhúng một
ảnh SVG cho trang web. Sử dụng object là một cách kết hợp giữa chèn ảnh SVG kiểu
inline và sử dụng phần tử img. Nó vừa đảm bảo các tính chất của một ảnh SVG, vừa
tách nội dung ảnh thành một tập tin riêng, vừa sử dụng được cơ chế “cache ảnh”
của trình duyệt.
Object còn cho phép chúng ta thêm đoạn mã, để tải một ảnh dự
phòng (fallbacks) trong trường hợp không tải được ảnh SVG.
<object type="image/svg+xml" data="pizza.svg">
<img src="pizza.png" alt="pizza">
</object>
Ở đoạn mã trên, thuộc tính type xác định định dạng dữ liệu (ảnh kiểu svg+xml), thuộc tính data
chỉ ra tên và vị trí của tập tin ảnh SVG. Phần tử img được sử dụng để tải ảnh dự phòng (pizza.png).
Một vài trình duyệt sẽ luôn tải ảnh dự phòng về máy người
dùng, nhưng lại không dùng đến. Điều này không tối ưu cho tốc độ tải trang web.
Để khắc phục, chúng ta sẽ thay thế phần tử img
bằng một “div rỗng”, sau đó, chèn ảnh
dự phòng bằng CSS, dưới hình thức ảnh nền của div. Xem ví dụ:
<object type="image/svg+xml" data="pizza.svg">
<div style="background-image: url(pizza.png); width: 100px; height:
100px;" role="img" aria-label="pizza"></div>
</object>
Ưu điểm của việc nhúng ảnh SVG bằng phần tử object là việc
tách mã SVG thành tập tin riêng và chúng ta có thể xử lý bằng JavaScript. Tuy
nhiên, vì mã SVG nằm trong tập tin riêng, nó không phải là một phần của DOM, vì
vậy chúng ta cũng không thể thực hiện CSS kiểu external lên các phần tử con của
SVG.
Sử dụng CSS
Đây là cách thứ 4 mà chúng ta có thể sử dụng để chèn một ảnh
SVG cho trang web. Vì chúng ta chưa học CSS, nên chỉ lướt qua một đoạn mã ví dụ
sau:
header {
background-image:
url(/images/decorative.svg);
}
Đoạn mã trên sẽ chèn hình ảnh decorative.svg cho phần tử
header của trang web.
Ở các phần trên, chúng ta có đề cập đến kĩ thuật dự phòng trong trường hợp không thể hiển thị được ảnh SVG. Có một giải pháp hay hơn để làm việc này là sử dụng phần tử picture để hiển thị ảnh. Chúng ta sẽ tìm hiểu về phần tử picture ở phần sau.
-----
Cập nhật: 20/12/2022