SVG图标在CSS中体验和控制能力远超字体图标，因其原生支持fill/stroke等属性、viewBox精准控制尺寸、按需加载零成本、错误可定位且无障碍语义更强。
SVG 图标在 CSS 中的使用体验和控制能力，远超字体图标——不是“更好一点”，而是解决了字体图标根本无法绕开的底层缺陷。
为什么 fill 和 stroke 在 SVG 里能直接生效，而字体图标只能靠 color
SVG 是图形，它的路径、圆形、多边形等元素原生支持 fill、stroke、stroke-width 等属性，CSS 可以逐元素控制。比如一个带描边的 home 图标，你可以单独给屋顶填红色、门框描蓝色：.icon-home path:nth-child(1) { fill: #f00; }。
字体图标本质是字符，浏览器把它当文字渲染，color 只能统一控制整个“字形”的前景色，没法区分内部结构。想局部变色？只能切多个字体文件，或者用 hack（比如叠加两个 <i> 元素），维护成本陡增。
- 字体图标无法响应
fill或stroke，哪怕你写了也无效 - SVG 支持
currentcolor自动继承父级文字色，同时还能覆盖其中某一段路径的颜色 - 某些图标库（如 Feather）导出的 SVG 默认用
stroke="currentColor"，一行 CSS 就能全局换主题色
为什么 viewBox 比 font-size 更可靠地控制图标尺寸和对齐
字体图标的大小受 font-size、line-height、vertical-align、甚至父容器 display 类型共同影响，调一次对齐可能要试五六种组合。SVG 的 viewBox 定义了坐标系，配合 width/height 或 em 单位，缩放完全可控，且不会被文本流干扰。
立即学习“前端免费学习笔记（深入）”；
- 写
<svg width="24" height="24" viewBox="0 0 24 24">，图标就稳稳占满 24×24 区域 - 用
em单位时，它会随父级字号等比缩放，但基线始终对齐，不用反复调vertical-align: -0.125em - 字体图标在 Flex 容器里常因
align-items: center错位，SVG 不会
为什么按需加载 SVG 几乎零成本，而字体图标一引就几十 KB
现代构建工具（Vite / Webpack）能轻松解析 import 的 SVG 文件并做 tree-shaking；而字体图标要么全量引入（Font Awesome 官方包 >150 KB），要么手动子集提取（fontmin 工具链复杂、易漏字、更新难）。
- Vite 项目配
vite-plugin-svg-icons，把src/icons/下所有 SVG 自动注册为组件，新增图标拖进去就可用 - Iconify 方案更激进：
<iconify-icon icon="mdi:home" />，CDN 加载、自动缓存、无本地资源管理负担 - 字体图标子集提取后仍需维护 TTF/WOFF/EOT 多格式，SVG 只需一个文件，Git 可 diff、可 review、设计师可直接改
为什么图标“突然消失”在 SVG 场景里几乎绝迹，而字体图标总在上线后出问题
字体图标依赖远程字体文件加载、Unicode 映射、@font-face 解析顺序、CSP 策略、甚至浏览器字体阻塞策略。SVG 是内联或本地资源，路径错了编译报错，内容错了肉眼可见，没有“加载失败却静默不报”的中间态。
- 常见字体图标失效原因：CDN 被墙、TTF MIME 类型配置错误、
unicode-range写错、字体文件未更新但 CSS 引用旧码点 - SVG 错误只会是：路径不存在（构建时报错）、
xlink:href拼错（控制台警告）、viewBox值异常（图标压扁或空白）——全部可定位 - 无障碍方面，SVG 可加
<title>和aria-hidden="false"，字体图标只能靠aria-label补救，语义天生弱一层
真正麻烦的从来不是“怎么让图标显示出来”，而是“怎么让它稳定、可维护、可协作地长期存在”。SVG 把图标降维成资源文件 + 标准 HTML/CSS，而字体图标始终卡在字体渲染这个黑盒里打转。这点，在团队协作半年后、图标数量破 200 个时，会变得无比清晰。
