Biểu tượng

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

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

Khi nói đến 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à ả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 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 dùng tệp PNG, bạn có thể 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 trên phần tử img để hình ảnh thích ứng. Nếu bạn sử dụng SVG thì theo mặc định, tệp đó sẽ phản hồi.

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, những hướng dẫn này chỉ mang tính tương đối. Bất kể kích thước bạn sử dụng để mô tả các đường kẻ và hình dạng, mọi thứ đều hiển thị với độ sắc nét phù hợp. Thay vì tạo nhiều tệp SVG có kích thước khác nhau, bạn có thể tạo một tệp SVG hoạt động được ở mọi kích thước. Bạn không cần phải 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 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>

Thậm chí bạn 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ẽ không phải thực hiện thêm một yêu cầu nào nữa. Bạn không cần phải đợi để tải hình ảnh xuống vì hình ảnh này đi kèm với HTML ...trong HTML! Ngoài ra, bạn sẽ sớm nhận thấy rằng việc nhúng các SVG như thế này sẽ giúp bạn có nhiều quyền kiểm soát 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ó 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 chứa văn bản và biểu tượng bên trong, thì biểu tượng này sẽ ở dạng 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 dùng để trình bày.

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

Vì CSS dùng để trình bày nên 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 tệp đó 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ần 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ể. Khi nghi ngờ, hãy thử nghiệm 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 không có văn bản đi kèm, thì biểu tượng đó không còn hiển thị nữa. Hình nền trong CSS không phải là cách thích hợp để hiển thị biểu tượng này. Biểu tượng cần được cung cấp 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ẽ nhận được 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 cách khác là đặt tên thành phần hỗ trợ tiếp cận lên đường liên kết hoặc nút đó và khai báo rằng hình ảnh đó dùng để 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 bên trong HTML của mình, 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 hiển thị dễ tiếp cận 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 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 của chúng giống như mọi phần tử khác trong trang. Bạn không thể thực hiện việc đó nếu sử dụng phần tử img để cho thấy 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 các 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 của mình, 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ề cách đánh dấu hình ảnh và SVG có thể truy cập 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 trở nên thích ứng thông qua sức mạnh của giao diện.

Kiểm tra kiến thức

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