SVG和Canvas哪个更高效？一文说清绘图技术选型

做网页监控界面时，经常要画图表、拓扑图或者实时数据流。这时候很多人会纠结：用 SVG 还是 Canvas？其实没有绝对的“更好”，关键看你怎么用。

SVG 是基于 XML 的矢量图形，每个图形元素都是 DOM 节点。比如你画一个圆形，它就是一个可被选中、可绑定事件的真实元素。这在需要交互的监控面板上特别实用。比如你在网络拓扑图里点击某个服务器节点查看状态，SVG 天然支持这种操作。

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="blue" />
</svg>

但问题也在这里——DOM 节点越多，页面越卡。如果你要实时渲染上千个动态点，浏览器可能就扛不住了。就像家里装灯，每个灯都要单独开关控制，方便是方便，但电线太多也容易出问题。

Canvas 是一块画布，你通过 JavaScript 指令往上面“画画”。它不保留图形信息，画完就完事了。所以它渲染速度快，内存占用低，特别适合高频更新的场景。比如你在监控 CPU 使用率，每秒刷新几十次折线图，Canvas 就比 SVG 流畅得多。

const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(100, 50);
ctx.stroke();

不过缺点也很明显：画上去的东西没法直接绑定事件。你想知道用户点的是哪条线？得自己算坐标位置，相当于你要手动判断“他到底点没点到那个地方”。

如果你做的监控系统需要用户频繁操作，比如拖动设备、点击查看详情，SVG 更省心。像机房设备布局图、网络结构图这类静态多交互的，SVG 更合适。

但要是数据变化快、图形密集，比如实时流量热力图、大量传感器点位动画，Canvas 效率更高。虽然开发麻烦点，但换来的是丝滑的帧率。

现在很多工具其实是混合使用的。比如用 Canvas 做底层渲染，再用 SVG 或 DOM 层做交互响应。就像马路画好了（Canvas），红绿灯和路牌还是得单独设（SVG）。

别迷信“高性能”三个字。有时候你觉得 Canvas 快，结果因为代码写得乱，反而更卡。真正高效的，是根据场景选对工具，而不是追着技术名词跑。

SVG和Canvas哪个更高效？网页绘图选型小技巧