canvas 特性
Canvas的一个好处是你不需要一个DOM结构。它允许你操纵成千上万元素的动画而不用担心DOM操作的开销
依赖分辨率,会失真.
svg 特性
SVG是一种描述二维图像的语言。它可以作为独立的语言使用,或是当与其它XML混合使用时,使用XML语法[XML10]。当和HTML5配合使用时,它使用HTML5的语法[HTML]。
SVG图像可以是动态且有交互效果的。动画的定义和触发可以通过声明(在SVG内容中内嵌SVG动画元素)或脚本实现。
不依赖分辨率,可缩放的矢量图
作为一个立即模式的图形系统,\<canvas\>不需要DOM,也就是文档对象模型。通过\<canvas\>,你可以绘制像素,系统并不会记录它们,这就避免了需要额外的内存空间来维护绘制的状态。使用SVG时,你绘制的每个对象都会被记录到内置模型中,这对你来说会方便很多,但会消耗额外的性能。
适合 cnavas 的场景
* 光线追踪
* 在一个较小的空间绘制大量的对象
* 针对视频的像素级操作
适合 svg 的场景
* 可伸缩性
* 可被爬虫搜索和阅读
* 不依赖js,可以使用画图工具AI等来制作svg,再用css等来控制动画.
混用
...