SVG 在各种像素密度下都能保持边缘清晰，还能根据主题调整颜色。但这种灵活性有一个前提：文件必须独立完整、结构简单，并在极小的空间中依然清晰可辨。
使用 viewBox 构建正方形画布
使用正方形 viewBox，例如 0 0 64 64，并在符号周围留白。viewBox 定义坐标系统，不会强制指定实际渲染尺寸。
将图形精简为最有辨识度的形状。即使矢量文件在技术上仍然清晰，细节、微小的字形内部空白和完整单词，也常会在 16 像素下消失。
| 检查项 | 原因 | 测试方式 |
|---|---|---|
| 正方形 viewBox | 裁切结果可预期 | 16×16 预览 |
| 简单路径 | 保证辨识度 | 浅色与深色标签页 |
| 无外部依赖 | 独立加载 | 断网测试 |
| ICO 后备 | 兼容旧客户端 | 根目录 URL |
让文件独立完整
将所需样式嵌入 SVG 内部。如果符号依赖特定字体，请将文字转换为路径，因为在此场景下，外部网络字体并不是可靠的依赖。
删除脚本、远程链接和不必要的编辑器元数据。简单的形状与样式也能让安全检查更容易，并减小文件体积。
最后，在浏览器中单独打开该文件，并离线测试。如果图形发生变化或消失，说明它仍依赖需要嵌入或替换的外部资源。
声明 SVG 并提供后备文件
添加 link rel icon，设置 type 为 image/svg+xml，并使用相对于根目录的 URL。同时保留根目录中的 favicon.ico，供不选择 SVG 或直接请求 ICO 的客户端使用。
SVG 不会取代 Apple Touch 图标或清单图标。请为这些界面导出不透明或可遮罩的 PNG 文件。
根据主题调整颜色
style 元素中的 prefers-color-scheme 规则可以在深色模式下改变 fill 或 stroke。先定义适用性强的默认颜色，再将主题版本作为渐进增强添加。
请在真实标签页和多个缩放级别下测试文件。还应检查未选择 SVG 时的后备效果：如果 ICO 在深色背景上看不见，对这些客户端来说仍是问题。
一手资料
常见问题
SVG 必须有 width 和 height 吗？
正方形 viewBox 是缩放的关键。可以显式设置 width 和 height，但浏览器会根据使用场景决定图标显示大小。
可以加载外部字体吗？
不要依赖外部字体。请将文字转换为路径，让文件独立完整、显示结果稳定。
iOS 只提供 SVG 就够了吗？
不够。请另外提供不透明的 PNG Apple Touch 图标，用于主屏幕。