如鱼饮水
·
在深色模式下自动切换 SVG 的颜色
💡
原文中文，约900字，阅读约需3分钟。
📝
内容提要
使用透明背景的 SVG 图片可以在深色模式下自动反色，解决黑色线条不清晰的问题。通过 CSS 设置，确保在暗色模式下的可读性。
🎯
关键要点
- 使用透明背景的 SVG 图片可以在深色模式下自动反色。
- SVG 图片相比 PNG 和 WebP 格式更清晰且可无损缩放，且文件大小更小。
- 生成的 SVG 图片大小介于 PNG 和 WebP 之间，经过精简的 SVG 文件大小最小。
- 在深色模式下，黑色线条的 SVG 图片不清晰，之前的解决方法是将背景改为白色，但效果不佳。
- 新的解决办法是利用 CSS 让 SVG 图片在暗色模式下自动反色。
- 在 CSS 中添加媒体查询以支持深色模式，并使用滤镜反转颜色。
❓
延伸问答
为什么使用透明背景的 SVG 图片在深色模式下更好？
透明背景的 SVG 图片在深色模式下可以自动反色，解决黑色线条不清晰的问题。
如何在 CSS 中设置 SVG 图片以支持深色模式？
在 CSS 中添加媒体查询，使用滤镜反转颜色，例如：@media (prefers-color-scheme: dark) { .svg { filter: invert(1) brightness(2); } }。
SVG 图片相比 PNG 和 WebP 有哪些优势？
SVG 图片更清晰、可无损缩放且文件大小通常更小。
在深色模式下，黑色线条的 SVG 图片有什么问题？
在深色模式下，黑色线条的 SVG 图片不清晰，难以辨认。
如何生成最小化的 SVG 图片？
使用 svgo 工具可以精简 SVG 文件，从而生成最小化的 SVG 图片。
为什么之前的解决方法不适合深色模式？
之前的方法是将背景改为白色，但在暗色模式下显得不协调，且在浅色模式下也不自然。
➡️
