canvas 与 svg 对比

角度	canvas	svg
绘图方式	通过绘制像素点来创建图像，绘制过程是即时的，绘制的元素不保留在 DOM 中，因此对于大量绘图以及动画效果更为适合。	通过创建矢量图形来创建图像，绘制过程是基于 XML 的，绘制的元素是保留在 DOM 中的，因此对于静态图形、数据可视化等场景更为适合。
分辨率	由于是像素级别的绘图，因此在不同分辨率的设备上表现可能会有所失真。	由于是矢量图形，因此在不同分辨率的设备上表现相对稳定，可以无损放大或缩小。
动画效果	通过一帧一帧的重新绘制实现动画效果，因此需要手动控制绘制速度和频率。	可以使用 CSS 和 JavaScript 来实现动画效果，或者通过 SMIL（可交互式媒体语言）来自动控制动画。
灵活性	可以绘制任何形状和图像，像素级别的控制可以创造出更加细腻的效果，但是需要手动编写绘制代码。	可以通过简单的语法来创建图形，支持各种形状、线条、路径以及各种变形效果，易于操作和修改。

svg
canvas