1.面试官问：SVG与Canvas的区别？

svg与canvas的区别？

之前求职的时候，因为做过图形化管理，所以就被面试官问到svg与canvas的区别是什么？当时脑袋有点浆糊，回答的很不好，后面整理了一下相关知识点。

SVG（Scalable Vector Graphics）和Canvas是两种在Web上用于绘制图形的技术，它们具有一些区别和适用场景。

1. 图形绘制方式：
   • SVG：SVG是基于XML的矢量图形格式，通过使用XML标记语言描述图形。它采用的是基于对象的绘制方式，可以通过定义形状、路径、颜色等属性来创建图形
   • Canvas：Canvas是基于HTML5的元素，提供了一个画布，可以使用JavaScript动态地在画布上绘制图形。它采用的是基于像素的绘制方式，通过绘制像素点来创建图形。
2. 图形渲染：
   • SVG：SVG图形是矢量图形，它们在不同分辨率下保持良好的质量，并且可以进行缩放和变换而不失真。SVG图形使用CSS样式进行渲染，可以应用各种效果和动画。
   • Canvas：Canvas图形是基于像素的，它们在不同分辨率下可能失去一些细节，并且不支持自动缩放。Canvas图形通常使用JavaScript代码直接操作像素，可以实现复杂的绘图效果，但缺乏内建的样式和动画支持。
3. 交互性：
   • SVG：SVG图形是DOM元素，可以轻松地与其他HTML元素进行交互，捕捉事件并应用事件处理程序。通过JavaScript，可以直接访问和修改SVG图形的属性和元素。
   • Canvas：Canvas图形是像素的位图，它们不是DOM元素，所以无法直接与其他HTML元素进行交互。要实现交互性，需要使用JavaScript来处理鼠标事件或触摸事件，并根据需要重新绘制图形。
4. 适用场景：
   • SVG：SVG适用于需要在不同尺寸和分辨率下保持质量的图形，特别适用于静态图形、图表、矢量图标和可伸缩的用户界面元素。
   • Canvas：Canvas适用于需要实时动态绘制和频繁更新的图形，特别适用于游戏、数据可视化和复杂的图像处理。

综上所述，SVG适用于静态、可缩放和交互性较强的图形，而Canvas适用于实时、动态和像素级的绘图需求。选择使用哪种技术取决于具体的应用场景和需求。