选SVG:图形需可识别、缩放不失真、直接交互、结构固定且需无障碍支持;选Canvas:画面频繁重绘、含大量动态元素。

选SVG还是Canvas,关键看图形是否需要“被识别”——SVG里的每个圆、每条线都是可点击、可缩放、可样式控制的独立对象;Canvas画完就只剩一堆像素,像拍了张照片,再想单独动某个元素就得重画。
图形要缩放或适配多分辨率
用SVG。它靠数学公式描述形状,放大10倍依然边缘锐利,适合图标、地图图层、响应式图表。Canvas是像素堆出来的,高清屏上容易模糊,缩放后还得手动调整绘制逻辑。
图形需要直接交互或动态样式
用SVG。矩形加click事件、路径加:hover变色、文字加CSS动画,一行代码就能生效。Canvas里没有“矩形对象”,只有坐标和颜色,想实现点击某块区域,得自己算坐标范围、写碰撞检测。
画面频繁重绘或含大量动态元素
用Canvas。比如粒子系统、实时波形图、2D游戏——每帧清空再重画几百个点,Canvas的像素级操作更轻量。SVG靠DOM节点维持状态,节点一多(比如上万个),浏览器重排重绘压力大,卡顿明显。
图形结构固定且需可访问性支持
用SVG。它本质是XML标记,能加aria-label、title、语义化分组,屏幕阅读器可读;Canvas默认无语义,要支持无障碍,必须额外用ARIA补全描述,开发成本高。











