目录一、标准面试回答二、原理区别1. Canvas示例2. SVG示例三、最核心区别对比四、渲染方式不同Canvas立即模式绘制SVG保留模式绘制五、性能区别1. Canvas 性能特点适用场景2. SVG 性能特点适用场景六、缩放区别CanvasSVG七、事件处理区别CanvasSVG八、动画区别Canvas 动画SVG 动画九、开发和维护上的区别Canvas优点缺点SVG优点缺点十、常见应用场景Canvas 适合SVG 适合十一、一个更容易记的类比十二、面试高分回答模板十三、简洁背诵版十四、一句话总结这是前端面试里的高频题。最核心的一句话可以先记住Canvas 是位图SVG 是矢量图。如果你先把这句说出来面试官一般会继续追问性能、适用场景、事件处理这些点。一、标准面试回答Canvas和SVG都可以用来绘制图形但它们的原理不同Canvas是基于像素的位图绘制适合频繁重绘、大量图形、动画和游戏场景SVG是基于 XML 的矢量图图形以 DOM 节点形式存在适合图标、流程图、地图等需要缩放和交互的场景简单说Canvas 更适合高频动态绘制SVG 更适合静态图形和结构化图形二、原理区别1. CanvasCanvas是一个画布。你通过 JavaScript 调用 API在这块画布上按像素绘制内容。一旦画上去浏览器并不会把每个图形当成独立 DOM 元素保存。也就是说画完之后只是“结果”留在画布上图形本身不是 DOM 节点想改某个图形通常需要重新绘制示例canvas idcvs width200 height200/canvasconst canvas document.getElementById(cvs) const ctx canvas.getContext(2d) ctx.fillStyle red ctx.fillRect(20, 20, 100, 100)2. SVGSVG本质上是 XML 描述的矢量图。每个图形比如圆、矩形、路径都是独立标签也可以看成 DOM 节点。也就是说图形是结构化的每个元素都能单独操作放大缩小不会失真示例svg width200 height200 rect x20 y20 width100 height100 fillred / /svg三、最核心区别对比对比项CanvasSVG图形类型位图 / 像素图矢量图是否依赖分辨率是否放大是否失真会失真不会失真图形是否是 DOM 元素不是是修改单个图形不方便通常重绘方便直接改节点事件处理需要手动计算命中区域可直接绑定事件适合场景动画、游戏、图表、大量数据绘制图标、地图、流程图、可交互图形四、渲染方式不同Canvas立即模式绘制Canvas 更像“拿画笔在纸上画”。调一次 API就画一次画完后图形本身不会保留结构信息要更新内容通常整个区域重新绘制所以它适合连续动画频繁刷新高性能绘图SVG保留模式绘制SVG 更像“页面里真的有这些图形元素”。每个图形都有自己的标签浏览器知道谁是谁可以直接改属性、改样式、加动画、绑事件所以它适合图形结构明确交互较多缩放需求高五、性能区别这是面试里很容易被追问的重点。1. Canvas 性能特点Canvas 通常更适合图形数量很多频繁重绘动画帧更新快因为它不需要维护大量 DOM 节点。适用场景小游戏粒子动画实时曲线大数据量图表2. SVG 性能特点SVG 在图形数量不多时非常方便开发体验也好。但如果页面里有几千几万个 SVG 节点DOM 会变得很重性能可能下降。适用场景logoicon流程图组织结构图地图少量可交互图形六、缩放区别CanvasCanvas 是位图。如果画布尺寸固定放大后会模糊、失真。想让它高清通常要处理画布分辨率设备像素比devicePixelRatioSVGSVG 是矢量图。可以任意缩放放大后仍然清晰特别适合高分屏和图标场景七、事件处理区别CanvasCanvas 里的图形不是 DOM所以不能直接给某个圆绑定点击事件给某个矩形加 hover如果想实现交互通常要监听整个 canvas 的鼠标事件自己计算鼠标点到了哪个区域这会更复杂。SVGSVG 每个图形本身就是元素可以直接绑定事件svg width200 height200 rect idbox x20 y20 width100 height100 fillred / /svgdocument.getElementById(box).addEventListener(click, () { alert(clicked) })所以 SVG 在交互开发上更直观。八、动画区别Canvas 动画Canvas 做动画通常依赖 JS不断清空再重绘function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height) // 重新绘制 requestAnimationFrame(draw) } draw()适合帧动画游戏动画粒子效果SVG 动画SVG 可以通过CSS 动画JSSMIL部分场景来实现图形动画。适合简单路径动画图标动画结构化动画九、开发和维护上的区别Canvas优点绘制性能好适合复杂、动态、连续图形非常适合游戏和可视化缺点不方便单独操作某个图形可维护性相对低无障碍和 SEO 支持弱SVG优点结构清晰每个元素可单独控制方便加事件、加样式、加动画缩放不失真缺点节点多时性能差不适合超高频大规模重绘十、常见应用场景Canvas 适合游戏画板粒子特效实时监控图表海量数据可视化高频动画SVG 适合icon 图标logo地图流程图组织架构图可编辑图形需要缩放不失真的图形十一、一个更容易记的类比你可以这样理解Canvas 像在纸上作画画完就只是结果SVG 像搭积木每一块都还在可以单独拿出来改这个类比在记忆上很好用。十二、面试高分回答模板Canvas和SVG的核心区别在于Canvas是基于像素的位图绘制SVG是基于 XML 的矢量图。Canvas适合高频重绘和复杂动画场景比如游戏、画板、实时图表因为它不需要维护大量 DOM 节点性能更适合连续绘制SVG中每个图形都是独立的 DOM 元素方便绑定事件、修改样式和缩放且放大不会失真所以更适合图标、流程图、地图这类结构化图形。简单说动态高频绘制选 Canvas静态可交互图形选 SVG。十三、简洁背诵版Canvas位图基于像素适合动画和高频重绘SVG矢量图基于 DOM适合图标和可交互图形Canvas放大会失真SVG不会Canvas修改图形通常要重绘SVG可以直接操作节点十四、一句话总结Canvas 更适合“画”SVG 更适合“描述图形”。