html5的svg和html4的图片有啥不同_矢量图怎么嵌入【教程】

SVG是矢量图，标签直接渲染可编程图形，支持CSS控制和DOM交互；加载位图，仅作外部资源容器，无法内部操作。

SVG 是矢量图， 加载的是位图

HTML5 的 标签直接声明并渲染矢量图形，所有形状、路径、文字都由 XML 描述，缩放不模糊、CSS 可控制、DOM 可交互。而 HTML4 时代常用的 加载的是 PNG/JPG/GIF 这类位图——本质是一堆像素点，放大后必然失真。

关键区别不在“是否能显示图片”，而在“图形是否可编程”：

• 内的 、 是真实 DOM 节点，能用 JavaScript 绑定点击事件、用 CSS 改 fill 或 stroke-width
• 只是一个外部资源容器，你无法选中它内部的某条线或某个色块
• SVG 文件体积通常比等效图标位图更小（尤其简单图形），且支持 gzip 压缩

三种嵌入 SVG 的方式，适用场景完全不同

不是“怎么嵌入”，而是“为什么选这种嵌入方式”。常见错误是把 SVG 当成图片硬塞进 ，结果失去所有交互能力。

• 内联 SVG（推荐用于图标、小图形）：把 SVG XML 直接写进 HTML，如 。优点：可 CSS 控制颜色、可 JS 操作节点、无额外请求、支持 :hover 动画
• 引用 SVG 文件（适合静态大图）：如 。缺点：无法用 CSS 修改内部颜色，JS 无法访问内部结构，但加载隔离、缓存友好
• 或 嵌入（少用，仅需独立上下文时）：能保持 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 切换。

兼容性注意： 在 IE9+ 原生支持，但部分属性要小心

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 就行。