svg与Three.js对比

SVG（Scalable Vector Graphics）和 Three.js 是两种不同的技术，分别适用于 2D 矢量图形 和 3D 图形渲染。

---

一、基本概念对比

特性	SVG	Three.js
类型	2D 矢量图形	3D 图形库（基于 WebGL）
渲染方式	DOM 元素	Canvas/WebGL 渲染
支持平台	所有现代浏览器	支持 WebGL 的浏览器
可交互性	原生支持事件绑定（如 click, hover）	需手动实现交互逻辑
缩放质量	无损缩放（矢量图）	分辨率依赖（像素图）
学习曲线	较低（HTML/CSS/JS）	较高（3D 数学、WebGL）

---

二、功能特性对比

SVG 的优势

• 适合 2D 图形展示：图标、流程图、地图、图表等。
• 易于集成：可直接嵌入 HTML，使用 CSS 控制样式。
• 可访问性好：SVG 是 DOM 节点，可被搜索引擎索引。
• 动画能力：支持 CSS 动画、SMIL（已弃用）、JavaScript 控制。
• 响应式设计友好：自动适配不同分辨率屏幕。

<svg width="100" height="100">
  <circle cx