SVG 徽标实战

SVG favicons in action

原始链接: https://css-tricks.com/svg-favicons-in-action/

SVG 格式的 favicon 比传统的 PNG 格式具有优势，尤其是在支持深色模式方面。虽然 SVG 的缩放和文件大小并不总是优于 PNG，但能够直接在 SVG 中嵌入 CSS 和媒体查询，允许根据用户的主题偏好动态调整 favicon。 文章建议了一种实用方法，重点关注对比度，而不是在 Illustrator 或 InkScape 等工具中手动编辑复杂的 SVG 代码，这可能非常繁琐。对于在深色模式下显得过暗的 logo，可以简单地应用 CSS 过滤器，例如 `brightness(2)`。对于灰度 logo，`invert(100%)` 可以有效地交换颜色。这些样式调整可以嵌入 SVG 中的 `