HTML5插入SVG图方法详解

本文深入解析了HTML5中嵌入SVG矢量图的四种主流方式——内联SVG、img标签引入、object嵌入以及慎用的iframe和CSS background-image，重点强调内联SVG为最可靠、可控性最强的方案，支持CSS样式覆盖与JS动态交互，无跨域和加载延迟问题；同时系统揭示了各方法在兼容性、可维护性、降级处理及常见坑点（如viewBox缺失、MIME类型错误、微信浏览器不显示等）上的关键差异，为开发者提供一份兼顾实用性与避坑指南的矢量图集成实战手册。

直接用 标签内联 SVG 最可靠

内联是最常用、最可控的方式，SVG 代码直接写在 HTML 中，能被 CSS 和 JS 操作，无跨域或加载延迟问题。

• 适合图标、简单图表、需要交互或动态变色的图形
• 注意：所有属性（如 fill、stroke）可直接用 CSS 覆盖，但需确保没加 !important 锁死内联样式
• 避免在 外包裹
  后再设 width/height —— 应直接在 上设 width、height 或用 viewBox 保证缩放比例

<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
  <circle cx="12" cy="12" r="10" stroke="#333" stroke-width="2" fill="transparent"/>
</svg>

用 引入外部 SVG 文件最轻量

适用于静态图标、不需 JS/CSS 控制的场景，浏览器当作图片处理，加载快、缓存友好。

• 路径必须正确，且服务器需返回 Content-Type: image/svg+xml，否则可能显示为下载或空白
• 不能用 CSS 修改内部元素（比如改 的 fill），但可用 filter 做简单效果（如 invert()）
• IE11 支持，但不支持 SVG 中的