内联svg最简单可控，直接写标签即可；需设viewbox与width/height配合防失真；删子元素fill/stroke属性才能用css控制颜色和hover；ie11及旧安卓webview存在、currentcolor、viewbox兼容问题。
直接用 <svg></svg> 标签写进 html 就行，不用额外加载
HTML 插入 SVG 最简单、最可控的方式就是内联——把 <svg></svg> 标签当普通 HTML 元素一样写进去。浏览器原生支持，不发请求，无跨域问题，样式和脚本能直接控制内部 <path></path>、<circle></circle> 等元素。
常见错误是试图像插入图片一样用 <img src="icon.svg" alt="HTML怎么插入SVG图形_HTML内联SVG教程【矢量】" > 后又想改颜色或加交互，结果发现 CSS 不生效、js 拿不到内部节点——那是外部文件，dom 是隔离的。
- 适合图标、小图表、可交互图形（比如带 hover 动画的按钮图标）
- 不适合大尺寸复杂 SVG（比如地图、CAD 导出图），会显著增大 HTML 体积
- 注意
<svg></svg>必须有明确宽高（width/height属性或 CSS），否则可能渲染为 0×0
内联 SVG 的 viewBox 和 width/height 怎么配
viewBox 定义坐标系和缩放基准，width/height 控制最终显示尺寸。两者配合才能保证不失真、不拉伸。
典型错误是只设 width 和 height，不写 viewBox，导致图形被裁剪或模糊；或者 viewBox 值和原始设计稿不一致，比例错乱。
立即学习“前端免费学习笔记（深入）”；
-
viewBox="0 0 100 100"表示：逻辑画布从 (0,0) 到 (100,100)，所有子元素坐标按此比例映射 - 设
width="200" height="100"且viewBox="0 0 100 100"→ 图形被横向拉伸 2 倍 - 推荐写法：
width和height用 CSS 或属性控制，viewBox固定为原始设计值（如 figma 导出时默认是"0 0 24 24"）
<svg width="24" height="24" viewBox="0 0 24 24"> <path d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z"/> </svg>内联 SVG 里怎么改颜色、加 hover 效果
内联 SVG 的 <path></path>、<rect></rect> 等子元素能直接被 CSS 选中，但前提是没在元素上硬编码 fill 或 stroke 属性（内联样式优先级高于 CSS）。
容易踩的坑：用设计工具导出的 SVG 常自带 fill="#000" 这类属性，导致 svg path { fill: red } 不生效。
- 导出后手动删掉所有子元素上的
fill、stroke属性，只留<svg></svg>上的viewBox和尺寸 - 用 CSS 控制：
svg.icon path { fill: currentColor }，再给<svg class="icon"></svg>设color，方便复用主题色 - hover 可直接写：
svg:hover path { fill: #007bff }，无需 JS
IE11 和旧安卓 WebView 对内联 SVG 的兼容注意点
IE11 支持内联 SVG，但有几个关键限制：不支持 <use></use> 引用外部符号（<use href="#icon"></use>）、currentColor 在某些 SVG 子元素上失效、CSS Filter 效果不一致。
旧版安卓 WebView（android 4.4 及更早）对 viewBox 解析不稳定，有时忽略它，只按 width/height 拉伸。
- 避免在 IE11 场景下用
<use></use>+ 外部<defs></defs>，改用重复粘贴<path></path> - 需要兼容 Android 4.4？给
<svg></svg>同时设width、height和viewBox，并确保viewBox宽高比与width/height一致 - 慎用
filter、mask、clipPath，这些在低版本里表现差异大
内联 SVG 看似简单，真正麻烦的是设计稿导出设置、颜色控制粒度、以及老环境里那些不报错但渲染异常的细节——尤其是 viewBox 值和实际尺寸没对齐时，图形会“看起来差不多”，但一放大就露馅。