Tổng quan cơ bản về cách tạo biểu tượng trang chủ thích ứng.
Trong bài đăng này, tôi muốn chia sẻ suy nghĩ về cách tạo biểu tượng trang web thích ứng bằng SVG. Hãy dùng thử bản minh hoạ.
Nếu bạn thích xem video, hãy xem phiên bản video của bài đăng này trên YouTube:
Tổng quan
Biểu tượng trang web tuỳ chỉnh là một cách tuyệt vời để hoàn thiện dự án web. Thẻ này hiển thị trên các thẻ trình duyệt trên máy tính, cũng như trong trình đọc "lưu để xem sau", các bài đăng khác trên blog liên kết đến trang web của bạn, v.v. Theo truyền thống, việc này được thực hiện bằng loại tệp .ico, nhưng gần đây, các trình duyệt đã cho phép sử dụng SVG, một định dạng vectơ. Khi sử dụng tính năng cải tiến
tiến bộ, bạn có thể phân phát các biểu tượng trang chủ .ico được hỗ trợ tốt và nâng cấp lên .svg nếu có.
SVG có thể tăng và giảm tỷ lệ mà không làm giảm chất lượng và có thể có kích thước rất nhỏ, cũng có thể có CSS nhúng, thậm chí là các truy vấn nội dung đa phương tiện được nhúng. Điều này có nghĩa là nếu bạn sử dụng biểu tượng trang chủ SVG trong ứng dụng trình đọc hoặc thanh dấu trang, thì có thể người dùng sẽ thấy biểu tượng liên quan đến giao diện (sáng hoặc tối) do các kiểu ưu tiên tối được cung cấp bên trong SVG. Sau đó, SVG sẽ điều chỉnh bằng cách sử dụng kiểu được nhúng cho các tuỳ chọn sáng và tối của người dùng.
Markup (note: đây là tên ứng dụng)
Mã đánh dấu SVG là XML sử dụng đuôi tệp .svg cho phép chứa nhiều loại mã động hơn.
Bắt đầu bằng cách tạo favicon.svg
Tạo một tệp mới có tên là favicon.svg rồi thêm nội dung sau:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
</svg>
Dưới đây là tệp SVG của tôi, tôi đã định cỡ viewBox phù hợp với hình minh hoạ:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
</svg>
Thêm hình dạng và đường dẫn
Tiếp theo, hãy thêm mã đường dẫn SVG. Thông thường, việc này có nghĩa là mở SVG trong trình soạn thảo mã, nhưng mã đó thường không thân thiện với con người. Sau đây là hướng dẫn tuyệt vời hướng dẫn bạn xuất và tối ưu hoá SVG từ các công cụ thiết kế.
Hình minh hoạ cho Thử thách về giao diện người dùng đồ hoạ này là của một nhà thiết kế đã tạo ra hình minh hoạ đó trong Adobe Illustrator. Tôi đã tối ưu hoá mạnh mẽ ứng dụng này. Tôi đã chạy mã này qua SVGOMG rồi chỉnh sửa thủ công các phần thừa.
Sau đây là ví dụ về nhóm đường dẫn hình minh hoạ skull của tôi, sau khi dọn dẹp:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<g id="skull">
<path id="skull-outline" class="favicon-stroke" stroke-linejoin="round" d="M19.62 188.39A166.62 166.62 0 0 1 186.24 21.77c115.25 0 166.61 74.59 166.61 166.62 0 1.83-.08 3.64-.13 5.46h.13s.68 175.09.68 178.65c0 30.11-16.26 41.67-36.32 41.67-12.7 0-35.22-3.93-36.22-32.69h-.2c-1 28.76-16.81 32.69-36.22 32.69-18 0-32.87-6.78-35.77-32.53-2.9 25.75-17.8 32.53-35.8 32.53-20.06 0-36.32-11.56-36.32-41.67 0-2.48.36-24.88.36-24.88A166.68 166.68 0 0 1 19.62 188.39Z" />
<path id="eyes-and-nose" d="M180.77 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82-28.68 19.17-28.68 42.82M275 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82S275 182.11 275 205.76M264.51 276.85s-29.26 43.53-20.12 49.23c7.07 4.41 20.49-16.71 20.49-16.71s12.82 22.58 16.76 20c16.24-10.71-17.13-52.5-17.13-52.5"/>
<path id="jawline" class="favicon-stroke" fill="none" stroke-linecap="round" d="M114.92 284.33c22.54-1 22 7 22 62.48" />
</g>
</svg>
Lưu ý các bộ chọn mã nhận dạng mà con người có thể đọc được như #eyes-and-nose và các lớp như .favicon-stroke. Đây là những nội dung tôi chỉnh sửa thủ công để chuẩn bị cho CSS.
Bạn không cần thêm các lớp và mã nhận dạng để SVG trở thành biểu tượng trang chủ thích ứng.
Liên kết biểu tượng trang web SVG từ HTML
Trong thẻ <head> của HTML, sau biểu tượng trang chủ .ico, hãy thêm nội dung sau:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
Vì biểu tượng mới có thể giống hệt với phiên bản .ico, hãy xác minh rằng biểu tượng đó đang được sử dụng. Mở bảng điều khiển Mạng của Công cụ dành cho nhà phát triển. Lọc theo hình ảnh và tìm kiếm biểu tượng trang web:
Kiểu
Giống như HTML, bạn có thể thêm thẻ <style> vào mã đánh dấu để sử dụng trong phạm vi tài liệu đó:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
</style>
…
</svg>
Phiên bản giao diện sáng sẽ là màu mặc định của favicon SVG. Các kiểu mà tôi viết cho lớp này chủ yếu là màu nét vẽ và màu nền:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
.favicon-stroke {
stroke-width: 8px;
stroke: #8929ff;
}
#skull-outline { fill: white }
#eyes-and-nose, #hat-outline { fill: #8929ff }
#hat-fill, #hat-bill { fill: #e662e6 }
</style>
…
</svg>
Tiếp theo là phần thú vị nhất, tạo kiểu cho phiên bản favicon có giao diện tối. Các kiểu cho nội dung đó sẽ chuyển vào truy vấn nội dung nghe nhìn trong thẻ kiểu:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
…
@media (prefers-color-scheme: dark) {
/* dark theme styles */
}
</style>
…
</svg>
Cuối cùng, mã của tôi có dạng như sau:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
…
@media (prefers-color-scheme: dark) {
.favicon-stroke { stroke: #343a40 }
#skull-outline { fill: #adb5bd }
#hat-outline { fill: #343a40 }
#eyes-and-nose { fill: #343a40 }
}
</style>
…
</svg>
Tôi đã chọn hoán đổi đường viền màu tím sáng thành màu xám đậm mát mẻ (#343a40), thay đổi màu xương sọ từ trắng thành màu xám nhạt mát mẻ (#adb5bd), nhưng vẫn giữ lại chiếc mũ màu hồng làm điểm nhấn.
Kết luận
Giờ thì bạn đã biết cách tôi làm, còn bạn thì sao‽ 🙂
Hãy đa dạng hoá các phương pháp và tìm hiểu tất cả các cách xây dựng trên web. Hãy tạo bản minh hoạ, gửi đường liên kết cho tôi trên Twitter và tôi sẽ thêm bản minh hoạ đó vào phần phối lại của cộng đồng ở bên dưới!