SVG 在 HTML 页面中的 7 种正确用法（2025 年前端主流写法，按推荐顺序排序）
| 排名 | 写法 | 适用场景 | 优点 | 缺点 | 2025 推荐指数 |
|---|---|---|---|---|---|
| 1 | 行内 <svg>（直接写在 HTML 里） | 图标、动态图形、需要改颜色/动画、暗黑模式 | 可被 CSS/JS 直接控制 支持 CSS 变量 响应式最强 无需 HTTP 请求 | 代码略多 | ★★★★★ |
| 2 | <img src="xxx.svg"> | 静态图标、内容图、LOGO、不需要交互 | 最简单 可缓存 支持懒加载 | 不能改颜色 不能动画 不支持 JS 交互 | ★★★★☆ |
| 3 | CSS background-image | 装饰性图标、按钮背景 | 轻松改大小/颜色（background: url(xxx.svg) no-repeat）支持 currentColor | 不能放内容区（语义差） | ★★★★☆ |
| 4 | <svg><use href="icons.svg#home"/></svg>（Sprite 方式） | 大量图标系统、性能要求极致 | 只请求一次文件 缓存极好 可改颜色 | 需要额外维护 sprite 文件 | ★★★★☆ |
| 5 | <object type="image/svg+xml" data="icon.svg"></object> | 需要 SVG 内部脚本运行时 | 独立作用域 可运行内部 <script> | 不能直接用 CSS 改颜色 | ★★☆☆☆ |
| 6 | <iframe src="chart.svg"></iframe> | 极少数复杂独立 SVG | 完全隔离 | 基本没人用了 | ★☆☆☆☆ |
| 7 | <embed src="xxx.svg"> | 老项目兼容 | 基本被淘汰 | 不推荐 | ★☆☆☆☆ |
2025 年最推荐的 3 种写法（直接抄）
1. 行内 SVG（90% 场景首选）
<!-- 自动跟随主题颜色 + 可动画 -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
</svg>优点：currentColor 自动继承文字颜色，暗黑模式一行 CSS 就全变！
2. <img> + 支持 CSS 改色的技巧（2025 新姿势）
<!-- 配合 SVG 文件里写 fill="currentColor" -->
<img src="icons/user.svg" alt="用户" class="icon">
<style>
.icon {
width: 32px;
height: 32px;
color: #0066ff; /* 这样就能改颜色了！ */
}
</style>记住：只要你的 .svg 文件里用 fill="currentColor" 或 stroke="currentColor"，就能被外部 CSS 控制颜色！
3. SVG Sprite + <use>（大型项目最省流量）
<!-- 先隐藏一个 sprite（只加载一次）-->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="home" viewBox="0 0 24 24">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
<polyline points="9 22 9 12 15 12 15 22"/>
</symbol>
<symbol id="user" viewBox="0 0 24 24">…</symbol>
</svg>
<!-- 使用时 -->
<svg width="32" height="32" fill="currentColor">
<use href="#home"/>
</svg>2025 年前端框架最佳实践
| 框架 | 推荐方式 |
|---|---|
| React | 直接 import 为组件：import Home from './home.svg?react'（用 Vite + @svgr） |
| Vue 3 | <component :is="HomeIcon" /> 或 unplugin-icons 自动按需加载 |
| Vite | 加插件 vite-plugin-svg-icons → <svg><use href="#i-mdi-home"/></svg> |
| Next.js | 直接 <Image src="/icons/home.svg" width={24} height={24} />（自动优化） |
一句话总结（2025 金句）：
- 需要改颜色、动画、交互 → 直接行内写 SVG
- 纯展示、不交互 → 用
<img>或 CSS background - 图标超多 → 用 SVG Sprite 或 Iconify/unplugin-icons
需要我直接发你一套「2025 年最强的 200 个可改色 SVG 图标包（全部用了 currentColor）」吗？解压即用，配合上面写法随便改颜色！
