Biểu tượng

Hầu hết hình ảnh đều là một phần của nội dung, nhưng biểu tượng là một phần của giao diện người dùng. Chúng phải có khả năng điều chỉnh tỷ lệ và thích ứng giống như văn bản trong giao diện người dùng của bạn.

Đồ hoạ vectơ có thể mở rộng

Đối với hình ảnh chụp ảnh, có rất nhiều lựa chọn về định dạng hình ảnh: JPG, WebP và AVIF. Đối với hình ảnh không phải ảnh chụp, 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 đơn sắc 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ẽ cần tạo nhiều phiên bản hình ảnh với nhiều kích thước và sử dụng thuộc tính srcset trên phần tử img để giúp hình ảnh có tính thích ứng. Nếu bạn sử dụng SVG, thì theo mặc định, SVG sẽ có khả năng thích ứng.

PNG (cũng như 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 chỉ dẫn sẽ được chuyển đổi thành pixel. Hơn hết, các chỉ dẫn này đều mang tính tương đối. Bất kể bạn sử dụng kích thước nào để mô tả đường kẻ và hình dạng, mọi thứ đều hiển thị với độ sắc nét vừa phải. Thay vì tạo nhiều SVG có kích thước khác nhau, bạn có thể tạo một SVG hoạt động ở mọi kích thước. Bạn không cần sử 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 để viết các chỉ dẫn trong tệp SVG. Đây là một ngôn ngữ đánh dấu, chẳng hạn 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 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 SVG như vậy, thì trình duyệt sẽ cần thực hiện ít hơn một yêu cầu. Bạn sẽ không phải đợi hình ảnh tải xuống vì hình ảnh sẽ xuất hiện cùng với HTML …trong HTML! Ngoài ra, như bạn sẽ sớm nhận ra, việc nhúng SVG như thế này cũng giúp bạn kiểm soát nhiều hơn đối với việc tạo kiểu cho chúng.

Biểu tượng và văn bản

Hình ảnh biểu tượng thường 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 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 đó mang tính trình bày. Văn bản mới là điều quan trọng. Khi sử dụng phần tử img, thuộc tính alt trống cho biết hình ảnh là dạng trình bày.

<button>
<img src="hamburger.svg" alt="" width="16" height="16">
Menu
</button>

Vì CSS là dành cho bản trình bày, nên bạn có thể đặt biểu tượng trong CSS dưới dạng 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 bên 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 mục đích của chúng rõ ràng. Bạn có thể sử dụng biểu tượng mà không có văn bản, nhưng đừng cho rằng mọi người đều hiểu ý nghĩa của một biểu tượng cụ thể. Nếu bạn còn băn khoăn, hãy kiểm thử với người dùng thực tế.

Nếu bạn quyết định sử dụng một biểu tượng mà không có văn bản đi kèm, thì biểu tượng đó sẽ không còn mang tính trình bày 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 thành phần hỗ trợ tiếp cận trong HTML.

Nếu bạn sử dụng phần tử img, biểu tượng 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 trên chính đường liên kết hoặc nút và khai báo rằng hình ảnh đó mang tính trình bày. Sử 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 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 thành phần hỗ trợ tiếp cận cho đường liên kết hoặc nút đó và 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 cho biểu tượng

Nếu nhúng trực tiếp các biểu tượng SVG vào HTML, bạn có thể tạo kiểu cho các phần của biểu tượng giống như bất kỳ phần tử nào khác trong trang. Bạn không thể làm như vậy nếu dùng phần tử img để hiển thị 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 tạo kiểu cho SVG là hình nền trong CSS, hãy đọc bài viết của Una về tạo màu cho nền SVG.
• Sara Soueidan đã viết về các nút biểu tượng hỗ trợ tiếp cận.
• Scott O'Hara đã viết về việc đánh dấu theo ngữ cảnh cho hình ảnh và SVG hỗ trợ tiếp cận.
• Nếu bạn đang sử dụng một công cụ thiết kế đồ hoạ để xuất SVG, hãy 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 trong hoạt động xây dựng thương hiệu của bạn thích ứng thông qua sức mạnh của việc tạo giao diện.

Kiểm tra kiến thức của bạn

Kiểm tra kiến thức của bạn về biểu tượng