SVG是矢量图，<svg>标签直接渲染可编程图形，支持CSS控制和DOM交互；<img>加载位图，仅作外部资源容器，无法内部操作。
SVG 是矢量图，<img> 加载的是位图
HTML5 的 <svg> 标签直接声明并渲染矢量图形，所有形状、路径、文字都由 XML 描述，缩放不模糊、CSS 可控制、DOM 可交互。而 HTML4 时代常用的 <img src="xxx.jpg"> 加载的是 PNG/JPG/GIF 这类位图——本质是一堆像素点，放大后必然失真。
关键区别不在“是否能显示图片”，而在“图形是否可编程”：
-
<svg>内的<circle>、<path>是真实 DOM 节点，能用 JavaScript 绑定点击事件、用 CSS 改fill或stroke-width -
<img>只是一个外部资源容器，你无法选中它内部的某条线或某个色块 - SVG 文件体积通常比等效图标位图更小（尤其简单图形），且支持 gzip 压缩
三种嵌入 SVG 的方式，适用场景完全不同
不是“怎么嵌入”，而是“为什么选这种嵌入方式”。常见错误是把 SVG 当成图片硬塞进 <img>，结果失去所有交互能力。
-
内联 SVG（推荐用于图标、小图形）：把 SVG XML 直接写进 HTML，如
<svg width="24" height="24"><path d="M12..."></svg>。优点：可 CSS 控制颜色、可 JS 操作节点、无额外请求、支持 :hover 动画 -
<img>引用 SVG 文件（适合静态大图）：如<img src="chart.svg" alt="统计图">。缺点：无法用 CSS 修改内部颜色，JS 无法访问内部结构，但加载隔离、缓存友好 -
<object>或<iframe>嵌入（少用，仅需独立上下文时）：能保持 SVG 自身脚本和样式作用域，但跨域限制多、兼容性差、SEO 不友好
内联 SVG 里改颜色，别碰 fill="#000" 写死值
很多设计师导出的 SVG 带内联 fill 和 stroke，直接复制进 HTML 后，CSS 就很难覆盖——因为内联样式优先级高于外部 CSS。
立即学习“前端免费学习笔记（深入）”；
正确做法是删掉 SVG 源码里的 fill、stroke 属性，改用 CSS 控制：
<svg class="icon" viewBox="0 0 24 24"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7.18 14.2l-5-4.87 6.82-.62L12 2z"/> </svg>
然后在 CSS 中：
.icon path {
fill: currentColor;
}
.icon { color: #3498db; }
这样图标就能随父元素 color 变色，也兼容 dark mode 切换。
兼容性注意：<svg> 在 IE9+ 原生支持，但部分属性要小心
IE10/11 对 SVG 的支持基本可用，但有几个坑必须绕开：
- 不要用
viewBox同时设负数坐标（如viewBox="-10 -10 100 100"），IE 可能渲染错位 - 避免在
<svg>上直接写width/height百分比（如width="100%"），建议用 CSS 控制尺寸 - IE 不支持
<use>引用外部 SVG Sprite 的跨文件引用（<use href="icons.svg#home">），只能用内联 Sprite - 如果必须支持 IE8，就别用 SVG，老实用 PNG 雪碧图 +
background-position
真正难处理的不是 SVG 本身，而是混合使用时忘了清除默认 vertical-align 导致的基线对齐错位——给 <svg> 加 vertical-align: middle 或设为 display: block 就行。
