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ơn, sau đây là phiên bản 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. Thông thường, việc này được thực hiện với 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ơ. Sử dụng
lũy tiến
nâng cao
bạn có thể phân phát các biểu tượng trang web .ico được hỗ trợ tốt và nâng cấp lên .svg nếu
sẵn có.
SVG có thể tăng và giảm tỷ lệ mà không làm giảm chất lượng, đồng thời 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
một tiện ích loại tệp .svg cho phép tệp này chứa nhiều loại tệp động hơn
.
Bắt đầu bằng cách thanh toán favicon.svg
Tạo một tệp mới có tên là favicon.svg rồi thêm nội dung sau đây:
<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, điều này có nghĩa là mở SVG trong một 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 cách 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 GUI này đã được đưa ra từ một nhà thiết kế tạo ra nó bằng Adobe Hoạ sĩ vẽ tranh minh hoạ. Tôi rất cân nhắc đã tối ưu hoá chiến dịch. 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 tự chỉnh sửa để 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ể trông giống với phiên bản .ico, hãy xác minh rằng biểu tượng này đang
đã 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 thẻ đánh dấu để sử dụng với thẻ đó
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 biểu tượng trang web SVG của tôi. Chiến lược phát hành đĩa đơn những kiểu tôi đã viết chủ yếu là 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>
của tôi đã kết thúc 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ũ điểm nhấn màu hồng.
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á phương pháp tiếp cận và tìm hiểu tất cả các cách xây dựng ứng 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!