直接嵌入SVG代码可实现样式与交互控制，适合动态图形；使用img标签引入SVG文件适用于静态图像但无法操作内部元素；通过CSS背景图应用SVG适合装饰性用途但维护复杂；object或iframe嵌入保留独立上下文，适合复杂图表；SVG Sprite技术合并多个图标减少请求，便于复用与着色，推荐用于图标系统。选择方法需根据交互需求、复用频率和性能权衡。
在HTML中集成SVG图形并不复杂，掌握几种常用方法能让你更灵活地使用矢量图形。SVG（可缩放矢量图形）是基于XML的图像格式，适合图标、图表和响应式设计。以下是详细的实现方式。
1. 直接嵌入SVG代码
将SVG代码直接写入HTML是最常见的方式，便于样式控制和动画操作。
做法：复制SVG的XML代码，粘贴到HTML文档中。
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="40" fill="blue" /> </svg>
优点：
立即学习“前端免费学习笔记（深入）”；
- 可直接用CSS修改颜色、大小等属性
- 支持JavaScript交互（如点击事件）
- 无需额外HTTP请求
适用场景：小图标、需要动态控制的图形。
2. 使用img标签引入SVG文件
像普通图片一样引用外部SVG文件。
<img src="icon.svg" alt="图标" width="100" height="100" />
优点：
立即学习“前端免费学习笔记（深入）”；
- 语法简单，易于理解
- 适用于静态图形
限制：
- 不能通过CSS改变SVG内部颜色或样式
- 无法用JavaScript操作内部元素
适合用于不需要交互的装饰性图像。
3. 通过CSS背景图使用SVG
将SVG作为背景图像应用于HTML元素。
<div class="icon-box"></div>
<style>
.icon-box {
width: 100px;
height: 100px;
background-image: url('icon.svg');
background-size: cover;
}
</style>
注意：若要在CSS中内联SVG，需进行URL编码：
.icon-box {
background-image: url("data:image/svg+xml,%3csvg...%3e");
}
优点：
立即学习“前端免费学习笔记（深入）”；
- 适合用作装饰背景
- 可配合响应式布局
缺点：难以控制内部结构，维护编码较麻烦。
4. 使用object或iframe嵌入SVG
通过object标签嵌入外部SVG文件，保留一定可操作性。
<object type="image/svg+xml" data="chart.svg" width="200" height="200"> 您的浏览器不支持object标签。 </object>
特点：
- SVG保持独立上下文，避免样式冲突
- 可在SVG内部使用脚本（部分浏览器限制）
- 比img提供更多控制能力
适合复杂图表或需要隔离样式的场景。
5. SVG Sprite 技术（推荐用于图标系统）
将多个SVG图标合并成一个文件，通过use标签调用。
先定义SVG sprite：
<svg style="display:none;">
<symbol id="icon-home" viewBox="0 0 24 24">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</symbol>
<symbol id="icon-star" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
</symbol>
</svg>
然后复用：
<svg width="24" height="24"> <use href="#icon-home" /> </svg> <svg width="24" height="24"> <use href="#icon-star" /> </svg>
优势：
- 减少HTTP请求
- 图标可单独着色（用fill控制）
- 易于维护和扩展
基本上就这些常用方法。选择哪种方式取决于你的需求：是否需要交互、是否频繁复用、是否关注性能。直接嵌入适合动态内容，img适合静态展示，sprite适合图标系统。合理使用，SVG会成为你前端开发的有力工具。
