Hầu hết hình ảnh là một phần trong nội dung của bạn nhưng biểu tượng là một phần của giao diện người dùng. Các phiên bản này nên điều chỉnh theo tỷ lệ và điều chỉnh theo cách tương tự như cách văn bản trên giao diện người dùng điều chỉnh theo tỷ lệ và điều chỉnh.
Đồ hoạ vectơ có thể mở rộng
Đối với hình ảnh chụp, có rất nhiều lựa chọn cho định dạng hình ảnh: JPG, WebP và AVIF. Đối với hình ảnh không phải là hình ảnh, bạn có thể chọn giữa định dạng Đồ hoạ mạng di động (PNG) và định dạng Đồ hoạ vectơ có thể mở rộng (SVG).
Cả PNG và SVG đều xử lý tốt các vùng có màu phẳng và cả hai đều cho phép hình ảnh của bạn có nền trong suốt.
Nếu sử dụng tệp PNG, có thể bạn sẽ phải tạo nhiều phiên bản hình ảnh ở nhiều kích thước và sử dụng thuộc tính srcset trong phần tử img để giúp hình ảnh thích ứng. Nếu bạn sử dụng SVG, thì định dạng này sẽ có tính đáp ứng theo mặc định.
PNG (và JPG, WebP và AVIF) là hình ảnh bitmap. Hình ảnh Bitmap lưu trữ thông tin dưới dạng pixel. Trong SVG, thông tin được lưu trữ dưới dạng hướng dẫn vẽ. Khi trình duyệt đọc tệp SVG, các hướng dẫn sẽ được chuyển đổi thành pixel. Hơn hết, các hướng dẫn này chỉ mang tính tương đối. Bất kể bạn dùng kích thước nào để mô tả đường kẻ và hình dạng, mọi thứ đều hiển thị ở độ sắc nét phù hợp. Thay vì tạo nhiều SVG có kích thước khác nhau, bạn có thể tạo một SVG sẽ hoạt động ở mọi kích thước. Bạn không cần dùng thuộc tính srcset.
<img src="image.svg" alt="A description of the image." width="25" height="25">
<img src="image.svg" alt="A description of the image." width="250" height="250">
XML được dùng để ghi hướng dẫn trong tệp SVG. Đây là ngôn ngữ đánh dấu, giống như HTML.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
<title>Smiling face</title>
<circle r="20" fill="yellow" stroke="black"/>
<ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
<ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
<path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>
Bạn thậm chí có thể đặt SVG vào bên trong HTML.
<figure>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
<title>Smiling face</title>
<circle r="20" fill="yellow" stroke="black"/>
<ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
<ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
<path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>
<figcaption>
A description of the image.
</figcaption>
</figure>
Nếu bạn nhúng một tệp SVG như vậy, thì đó là một yêu cầu ít hơn mà trình duyệt cần thực hiện. Bạn không cần phải chờ tải hình ảnh xuống vì hình ảnh đã được tạo bằng HTML ...trong HTML! Ngoài ra, như bạn sẽ sớm phát hiện ra, việc nhúng các tệp SVG (Đồ hoạ vectơ có thể mở rộng) như thế này cũng giúp bạn kiểm soát tốt hơn việc định kiểu cho chúng.
Biểu tượng và văn bản
Hình ảnh biểu tượng thường có các hình dạng đơn giản trên nền trong suốt. SVG là lựa chọn lý tưởng cho các biểu tượng.
Nếu bạn có một nút hoặc đường liên kết có văn bản và biểu tượng bên trong, thì biểu tượng đó có tính chất trình bày. Văn bản là yếu tố quan trọng. Khi sử dụng phần tử img, thuộc tính alt trống cho biết hình ảnh chỉ mang tính trình bày.
<button>
<img src="hamburger.svg" alt="" width="16" height="16">
Menu
</button>
Vì CSS dùng để trình bày, bạn có thể đặt biểu tượng trong CSS làm hình nền.
<button class="menu">
Menu
</button>
.menu {
background-image: url(hamburger.svg);
background-position: 0.5em;
background-repeat: no-repeat;
background-size: 1em;
padding-inline-start: 2em;
}
Nếu bạn đặt SVG vào trong HTML, hãy dùng thuộc tính aria-hidden để ẩn SVG đó khỏi công nghệ hỗ trợ.
<button class="menu">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
<rect width="100" height="20" />
<rect y="30" width="100" height="20"/>
<rect y="60" width="100" height="20"/>
</svg>
Menu
</button>
Biểu tượng độc lập
Sử dụng văn bản bên trong các nút và đường liên kết nếu bạn muốn rõ ràng mục đích của chúng. Bạn có thể sử dụng biểu tượng không cần văn bản nhưng đừng cho rằng mọi người đều hiểu ý nghĩa của biểu tượng cụ thể. Khi nghi ngờ, hãy thử nghiệm với người dùng thực.
Nếu bạn quyết định sử dụng một biểu tượng không có bất kỳ văn bản đi kèm nào, thì biểu tượng đó sẽ không hiển thị được nữa. Hình nền trong CSS không phải là cách phù hợp để hiển thị biểu tượng. Biểu tượng cần được đặt tên có thể tiếp cận trong HTML.
Nếu bạn sử dụng phần tử img, biểu tượng này sẽ lấy tên thành phần hỗ trợ tiếp cận từ thuộc tính alt.
<button>
<img src="hamburger.svg" alt="Menu" width="16" height="16">
</button>
Một lựa chọn khác là đặt tên thành phần hỗ trợ tiếp cận vào chính đường liên kết hoặc nút và tuyên bố rằng hình ảnh là trình bày. Dùng thuộc tính aria-label để cung cấp tên thành phần hỗ trợ tiếp cận.
<button aria-label="Menu">
<img src="hamburger.svg" alt="" width="16" height="16">
</button>
Nếu bạn đặt SVG vào bên trong HTML, hãy sử dụng thuộc tính aria-label trên đường liên kết hoặc nút để đặt tên cho thành phần hỗ trợ tiếp cận, đồng thời sử dụng thuộc tính aria-hidden trên biểu tượng.
<button aria-label="Menu">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
<rect width="100" height="20" />
<rect y="30" width="100" height="20"/>
<rect y="60" width="100" height="20"/>
</svg>
</button>
Tạo kiểu biểu tượng
Nếu nhúng biểu tượng SVG trực tiếp vào HTML, bạn có thể tạo kiểu cho các phần trong số đó giống như bất kỳ phần tử nào khác trong trang. Bạn không thể làm việc đó nếu sử dụng phần tử img để hiển thị các biểu tượng.
Trong ví dụ sau, các phần tử rect bên trong SVG có giá trị fill là blue để khớp với kiểu cho văn bản của nút.
button {
color: blue;
}
button rect {
fill: blue;
}
Bạn cũng có thể áp dụng kiểu hover và focus.
button:hover,
button:focus {
color: red;
}
button:hover rect,
button:focus rect {
fill: red;
}
Tài nguyên
- Nếu bạn cần định kiểu cho các SVG là hình nền trong CSS của bạn, hãy đọc bài viết của Una về cách tô màu nền SVG.
- Sara Soueidan đã viết về các nút biểu tượng dễ tiếp cận.
- Scott O'Hara đã viết về việc đánh dấu các hình ảnh và SVG (Đồ hoạ vectơ có thể truy cập được) theo ngữ cảnh.
- Nếu bạn đang dùng một công cụ thiết kế đồ hoạ để xuất tệp SVG, hãy sử dụng SVGOMG để tối ưu hoá đầu ra.
Biểu tượng là một phần quan trọng trong việc xây dựng thương hiệu cho trang web của bạn. Tiếp theo, bạn sẽ tìm hiểu cách làm cho các khía cạnh khác của thương hiệu có tính thích ứng thông qua sức mạnh của giao diện.
Kiểm tra mức độ hiểu biết của bạn
Kiểm tra kiến thức của bạn về các biểu tượng
SVG có thể xử lý mọi mật độ pixel chỉ bằng một tệp hoặc khối mã <svg>.
.png hoặc .jpg, SVG không cần phải có srcset hoặc phần tử <picture>.Mã SVG nằm trực tiếp trong HTML có những ưu điểm nào?