HTML5中SVG图标有五种引入方式：一、内联SVG可完全控制样式；二、背景图SVG适合复用且无交互；三、SVG Sprite减少请求并支持语义化引用；四、SVG字体兼容旧浏览器；五、JavaScript动态注入适配主题切换等场景。
如果您希望在HTML5页面中使用SVG作为图标，并对其进行灵活的样式调整，则需要掌握多种引入方式及对应的CSS控制技巧。以下是实现此目标的方法：
一、内联SVG代码嵌入
将SVG代码直接写入HTML文档中，可实现对图标的完全控制，包括颜色、尺寸、动画等，且无需额外HTTP请求。
1、复制SVG源码（从设计工具导出或在线SVG库获取），确保以开头、结尾。
2、在HTML中需要显示图标的位置，粘贴该SVG代码块。
立即学习“前端免费学习笔记（深入）”；
3、为SVG内的fill或stroke属性，或通过CSS类统一控制。
4、添加class="icon"到标签，并在CSS中定义：.icon { width: 24px; height: 24px; fill: currentColor; }，使图标继承父级文字颜色。
二、SVG作为背景图像引入
利用CSS的background-image属性加载外部SVG文件，适用于需复用且不需交互的图标，支持缩放与颜色覆盖（通过滤镜或mask）。
1、准备一个独立的SVG文件（如home.svg），确保其内部无固定fill值，或使用fill="currentColor"。
2、在CSS中定义图标类：.icon-home { background: url('home.svg') no-repeat center; background-size: contain; }
3、在HTML中使用空标签承载样式：。
4、如需动态变色，配合filter: brightness(0) saturate(100%) invert(50%) sepia(100%) hue-rotate(180deg)模拟颜色替换效果。
三、SVG Sprite技术
将多个SVG图标合并为单个SVG文件，通过引用其中的
1、创建icons.svg文件，在根节点下定义多个id和viewBox，例如：
2、将该SVG文件置于HTML底部或隐藏区域：。
3、在任意位置插入引用：。
4、统一控制尺寸与颜色：.icon { width: 18px; height: 18px; fill: #333; }，前提是原始
四、SVG字体替代方案（兼容旧环境）
针对需支持IE9–IE11等老旧浏览器的场景，可将SVG图标封装为Web字体（如IcoMoon生成），通过@font-face加载并用伪元素渲染。
1、使用IcoMoon或Fontello上传SVG图标集，生成字体包，下载后提取.woff与.svg格式文件。
2、在CSS中声明字体：@font-face { font-family: 'Icons'; src: url('icons.woff') format('woff'); }
3、定义图标类：.icon-user::before { font-family: 'Icons'; content: '\e901'; }，其中\e901为对应Unicode码点。
4、设置字体大小与行高以对齐文本：.icon-user { font-size: 16px; line-height: 1; }
五、通过JavaScript动态注入SVG
在运行时根据条件加载并插入SVG内容，适合按需渲染、主题切换或A/B测试等动态场景。
1、使用fetch()读取SVG文件内容：fetch('bell.svg').then(r => r.text()).then(svgStr => { ... })。
2、解析返回字符串为DOM节点：const parser = new DOMParser(); const svgDoc = parser.parseFromString(svgStr, 'image/svg+xml');
3、提取根元素：const svgEl = svgDoc.documentElement;
4、设置关键属性并插入目标容器：svgEl.setAttribute('class', 'icon'); svgEl.setAttribute('aria-hidden', 'true'); container.appendChild(svgEl);
