SVG是矢量图，标签直接渲染可编程图形，支持CSS控制和DOM交互；加载位图，仅作外部资源容器，无法内部操作。
SVG 是矢量图，![html5的svg和html4的图片有啥不同_矢量图怎么嵌入【教程】]()
HTML5 的 标签直接声明并渲染矢量图形，所有形状、路径、文字都由 XML 描述，缩放不模糊、CSS 可控制、DOM 可交互。而 HTML4 时代常用的 
关键区别不在“是否能显示图片”，而在“图形是否可编程”：
-
内的fill或stroke-width -
- SVG 文件体积通常比等效图标位图更小（尤其简单图形），且支持 gzip 压缩
三种嵌入 SVG 的方式，适用场景完全不同
不是“怎么嵌入”，而是“为什么选这种嵌入方式”。常见错误是把 SVG 当成图片硬塞进
-
内联 SVG（推荐用于图标、小图形）：把 SVG XML 直接写进 HTML，如
。优点：可 CSS 控制颜色、可 JS 操作节点、无额外请求、支持 :hover 动画 -
-
或嵌入（少用，仅需独立上下文时）：能保持 SVG 自身脚本和样式作用域，但跨域限制多、兼容性差、SEO 不友好
内联 SVG 里改颜色，别碰 fill="#000" 写死值
很多设计师导出的 SVG 带内联 fill 和 stroke，直接复制进 HTML 后，CSS 就很难覆盖——因为内联样式优先级高于外部 CSS。
立即学习“前端免费学习笔记（深入）”；
正确做法是删掉 SVG 源码里的 fill、stroke 属性，改用 CSS 控制：
然后在 CSS 中：
.icon path {
fill: currentColor;
}
.icon { color: #3498db; }
这样图标就能随父元素 color 变色，也兼容 dark mode 切换。
兼容性注意：
IE10/11 对 SVG 的支持基本可用，但有几个坑必须绕开：
- 不要用
viewBox同时设负数坐标（如viewBox="-10 -10 100 100"），IE 可能渲染错位 - 避免在
上直接写width/height百分比（如width="100%"），建议用 CSS 控制尺寸 - IE 不支持
引用外部 SVG Sprite 的跨文件引用（），只能用内联 Sprite - 如果必须支持 IE8，就别用 SVG，老实用 PNG 雪碧图 +
background-position
真正难处理的不是 SVG 本身，而是混合使用时忘了清除默认 vertical-align 导致的基线对齐错位——给 加 vertical-align: middle 或设为 display: block 就行。
