SVG图标在HTML5中有字体化和内联两种主流用法：前者体积小、兼容好但功能受限；后者灵活可控、无障碍友好但体积和维护成本略高；现代项目应按需混合使用。
SVG图标在HTML5中主要有两种主流用法：一种是将SVG图形转换为字体（即“SVG图标字体”，如使用IcoMoon、Font Awesome等生成的woff/ttf字体文件），另一种是直接在HTML中嵌入SVG代码（内联SVG）。二者在性能、可维护性、兼容性和功能支持上差异明显，不能简单说谁更好，而要看具体场景。
SVG字体化：轻量但功能受限
将图标打包成字体文件后，通过CSS类名调用（如 ），本质是用字符映射替代图形渲染。
- 优势：体积小（尤其图标数量多时，单个字体文件远小于多个SVG文件）、易复用（一套字体全局可用）、支持CSS控制颜色/大小/阴影等基础样式、兼容性极好（IE9+均支持）
-
劣势：无法设置图标内部结构（比如单独给某个路径填色或加动画）、不支持语义化（
标签无语义，需额外加aria-hidden或role="img"）、缩放失真风险（字体渲染依赖字体引擎，小尺寸下可能模糊或锯齿）、无法响应式控制各部分（如只让箭头旋转，其余静止）
直接嵌入SVG：灵活可控但体积与维护成本略高
把SVG代码写进HTML（或通过引用外部SVG sprite），让浏览器原生解析和渲染矢量图形。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
优势：完全可编程（每个
-
劣势：单个图标代码较长（尤其复杂图标），未压缩时HTML体积增加；大量内联SVG会提高首屏HTML大小；复用需借助
机制或组件封装；旧版IE（IE11及以下）对跨文件引用支持不完整（需polyfill或同源内联）
现代项目推荐策略：按需混合使用
实际开发中不必二选一，而是结合场景分层处理：
- 通用UI图标（如按钮中的“×”、“→”、“❤”）且无需动态变色/动画 → 可用字体方案，加载快、维护省心
- 品牌图标、数据可视化图表、需交互反馈的图标（如播放按钮状态切换、加载动画）→ 必须用内联SVG或
方式 - 构建工具链成熟（如Webpack/Vite）→ 推荐用SVG React组件或
svg-sprite-loader自动聚合SVG，兼顾复用性与灵活性 - 重视SEO与无障碍 → 所有图标必须提供文字替代（
aria-label或
兼容性与未来趋势
SVG字体（.svg字体格式）本身已被Chrome 45+、Firefox 39+废弃，当前所谓“SVG图标字体”实际是用SVG路径生成的TrueType/OpenType字体（.woff2/.ttf），属于字体技术，不是SVG标准的一部分。W3C已明确SVG 2不再支持字体嵌入规范。因此，“SVG图标字体”只是借了SVG设计流程，底层仍是字体渲染。而原生SVG嵌入符合标准演进方向，所有现代浏览器支持良好，也是PWA、Web Components生态的首选方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
