Thông tin tổng quan cơ bản về cách tạo biểu tượng trang web 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. Thử bản minh hoạ.
Nếu bạn thích video, đây là phiên bản YouTube của bài đăng này:
Tổng quan
Biểu tượng trang web tuỳ chỉnh là một cách hay để trau chuốt dự án web. Nút này hiển thị trên các thẻ trình duyệt trên máy tính và cũng xuất hiện trong trình đọc "lưu để mua 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ơ. Bằng cách sử dụng tính năng nâng cao tiến bộ, 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 có.
SVG có thể tăng và giảm quy mô mà không làm giảm chất lượng, đồng thời có kích thước rất nhỏ. Các tệp này cũng có thể có CSS nhúng, thậm chí là các truy vấn nội dung nghe nhìn được nhúng. Điều này có nghĩa là nếu biểu tượng trang web SVG được dùng trong ứng dụng đọc hoặc thanh dấu trang, thì có khả năng người dùng có thể nhận được biểu tượng (sáng hoặc tối) liên quan đến giao diện do các kiểu lựa chọn ư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 định kiểu được nhúng cho các lựa 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 bằng cách sử dụng đuôi loại tệp .svg, cho phép mã này chứa nhiều loại mã động hơn.
Bắt đầu bằng cách thực hiệ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:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
</svg>
Đây là tệp SVG của tôi, tôi đã định kích thước viewBox phù hợp với hình minh hoạ của mình:
<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 chỉ dẫn bạn cách xuất và tối ưu hoá SVG bằng các công cụ thiết kế.
Hình minh hoạ cho Thử thách GUI này đến từ một nhà thiết kế đã thực hiện tác phẩm đó trong Adobe Illustrator. Tôi đã tối ưu hoá một cách mạnh mẽ cho nó. Tôi đã chạy nó qua SVGOMG và sau đó chỉnh sửa nó bằng tay.
Dưới đâ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 nhóm đó:
<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>
Hãy 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. Những video này là do tôi tự chỉnh sửa để chuẩn bị cho CSS.
Bạn không cần phải thêm lớp và mã nhận dạng để SVG trở thành biểu tượng trang web 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 web .ico, hãy thêm đoạn mã 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 đó đang được sử dụng. Mở bảng điều khiển Mạng của Công cụ cho nhà phát triển. Lọc theo hình ảnh và tìm kiếm biểu tượng yêu thích:
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 tệp SVG (Đồ hoạ vectơ có thể mở rộng) của tôi. Các 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, phần thú vị nhất là tạo kiểu cho phiên bản giao diện tối của biểu tượng trang web. Các kiểu cho điều đó sẽ chuyển vào truy vấn phương tiệ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ư thế này:
<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 các đường viền màu tím sáng thành màu xám đậm nhạt (#343a40),
thay đổi màu xương hộp sọ từ màu trắng thành màu xám nhạt (#adb5bd), nhưng
để bên trái chiếc mũ có màu hồng nhấn.
Kết luận
Giờ bạn đã biết tôi làm được như thế nào, bạn sẽ làm thế nào 🙂
Hãy đa dạng hoá phương pháp tiếp cận của chúng ta và tìm hiểu tất cả các cách xây dựng trên web. Hãy tạo một bản minh hoạ, đường liên kết tweet me và tôi sẽ thêm bản phối lại đó vào phần bản phối lại của cộng đồng bên dưới!