内联SVG可直接操控样式、响应式和交互，而img标签引入的SVG无法修改内部元素；需保留viewBox、删冗余属性、避免inline样式干扰CSS。
直接把 SVG 代码写进 HTML 里，不是用 <img alt="HTML中如何插入SVG图像_HTML插入SVG图像代码写法【矢量图】" > 引，就能控制样式、响应式和交互。
SVG 写在 HTML 里 vs <img src="xxx.svg" alt="HTML中如何插入SVG图像_HTML插入SVG图像代码写法【矢量图】" >
用 <img alt="HTML中如何插入SVG图像_HTML插入SVG图像代码写法【矢量图】" > 加载 SVG，它就是一张图：不能改颜色、没法用 CSS 选中内部 <path></path>、hover 动画基本没戏。而把 SVG 源码直接贴进 HTML（也就是“内联 SVG”），浏览器会把它当 DOM 节点处理——<svg></svg> 是容器，<circle></circle>、<rect></rect>、<path></path> 全都能用 CSS 或 JS 操作。
- 适合需要动态变色、悬停反馈、响应式缩放的图标或图表
- 不适合超大 SVG（比如地图底图），会拖慢 HTML 解析
- 注意原始 SVG 文件里可能带
<style></style>或class，粘过来后要检查是否和页面其他样式冲突
内联 SVG 的最小可用结构
别复制整个 Illustrator 导出的 SVG——里面一堆冗余 xmlns、xml:space、编辑器元数据。只要保留最简骨架：
<svg viewBox="0 0 24 24" width="24" height="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>
-
viewBox必须有，它定义坐标系，是响应式缩放的基础；删了就可能只显示左上角一小块 -
width/height可设为具体值，也可用style="width: 1em; height: 1em;"适配文字大小 - 原始 SVG 中的
fill="#000"可删掉，换成 CSS 控制：svg path { fill: currentColor; }，这样继承父级文字色
常见错误：CSS 不生效 or 图形消失
内联 SVG 里很多属性（比如 fill、stroke）默认是 presentation attribute，优先级比 CSS 高。直接写 <path fill="red"></path>，后面加 path { fill: blue; } 也盖不住。
立即学习“前端免费学习笔记（深入）”；
- 解决办法：删掉 SVG 源码里的
fill、stroke、opacity等 inline 属性，全交给 CSS 管 - 如果用了
<use href="#icon"></use>引用外部符号，确保<symbol id="icon"></symbol>在同一页面且已加载（不能跨域，也不能放在后才定义） - 某些 SVG 工具导出时带
overflow="hidden"，结果一缩放就被截掉，手动删掉这个属性
真正麻烦的是混合使用场景：比如一个组件既要支持 SSR 渲染（得提前塞 SVG 字符串），又要支持 JS 动态注入（得操作 <path></path> 节点）。这时候别硬拼字符串，用 DOMParser 解析再 appendChild 更稳——但那是另一个问题了。
